Dynamic Headline Fader
maximizing screen real estate through transitions

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.

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:

• creating the external JavaScript file that contains the news headlines
• placing the CSS-positioned elements required
• blending headlines in Explorer 4
• fading headlines in Navigator 4
• creating a cross-browser fader
• customizing the fader with parameters
• accounting for older browsers

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

• everything there is to know about the Explorer (and possible CSS2) Blend Transition Filter
• how to check for possible user disabling of style sheets in Navigator 4.

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