DHTML Lab: Dynamic Headline Fader | WebReference

DHTML Lab: Dynamic Headline Fader


Logo

Dynamic Headline Fader
maximizing screen real estate through transitions



Parameters used in this example:

General:
• box width: 130;
• box height: 40;
• box color: white;

Timing:
• blend interval: 5;
• blend duration: 1;
• loops: 3;

Link Text:
• text decoration: none;
• text alignment: left;
• font color: firebrick;
• font size: 9 pt;
• font weight: bold;
• font style: normal;
• font family: Arial,Geneva,sans-serif;
• line height: 9pt;

Important Note:
This column discusses Version 1 of the Dynamic Headline Fader script.
A more recent column introduces Version 2 of the script.
Please read about Version 1, as most of the concepts are maintained in the newer version, but please use Version 2 in your web pages.

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 or Internet Explorer 4, Release.

Hopefully, by now, you've noticed the news headline fader in the left column.

Most of you have seen a similar technique, on Netscape's home page, or earlier, on C|NET. Those faders are not really techniques. They are animated GIFs, produced daily with the latest headlines.

In this column, we will create a DHTML news headline fader. Anyone who can use a keyboard to enter text can update the news from a simple external text file.

More ambitiously, the text file that contains the headlines can be CGI-generated, to provide the page visitor with the latest news and links.

The parameters listed on the left describe the customization values for the particular fader you are viewing. Every page in this column has a fader, each with different parameter settings. After we have discussed customization, browse through the different versions again, to understand the visual rendering of the parameters.

In This Column

We will discuss:

For the first time, in our columns, we will learn:

Let's start with a visit to our old friend: the JavaScript array.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan. 28, 1998
Revised: Feb. 03, 1998

URL: https://www.webreference.com/dhtml/column13/