DHTML Lab: Dynamic Headline Fader; Backward Compatibility

Dynamic Headline Fader
accounting for older browser versions

Since all our code uses JavaScript1.2 as the LANGUAGE attribute, the statements will only be executed by DHTML browsers. Likewise, the <STYLE> is ignored. The empty DIVs in our HTML also have no effect. In other words, our page, and our code do not harm non-DHTML browsers.

Alternate content

You may want, however, to provide alternate content for non-DHTML browsers. This content may be static text headlines or a graphic. Whatever you decide, it is a good idea to keep the page space used similar to the fader box, to not drastically alter the look of your page.

The best way to include alternate content is to enclose it in a positioned element with its visibility set to hidden. In this way, DHTML browsers will not display it:

#elNoDHTML {
    position: absolute;
    visibility: hidden;
}

Alternately, as part of our dynamically created style string:

styleStr = "<STYLE TYPE='text/css'>"
 .
 .
 .
 + "#elNoDHTML {position:absolute; visibility:hidden}"
 .
 .
 .
 + "</STYLE>";
document.write(styleStr);

In the HTML, place it in elAll, with the other nested elements:

<DIV ID="elAll">
    <DIV ID="elNoDHTML">alternate HTML goes here</DIV>
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>

For the purposes of this column, the alternate content is a simple image, alerting non-DHTML visitors to the presence of DHTML in the space, with an appropriate ALT attribute:

<IMG SRC="nodhtml.gif" WIDTH=130 HEIGHT=27 BORDER=0 ALT="DHTML News Fader">

This column's fader HTML looks like this:

<DIV ID="elAll">
    <DIV ID="elNoDHTML">
        <IMG SRC="nodhtml.gif"
             WIDTH=130 HEIGHT=27 BORDER=0
             ALT="DHTML News Fader">
    </DIV>
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>

The Animated GIF Option

For the more ambitious, the alternate content may be an animated GIF, like on Netscape's home page, with fading headlines:

Animated GIF courtesy of Andrew (the Animated GIF) King.

Accounting for User Preferences

Navigator 4 allows the disabling of JavaScript and/or Stylesheets by the user: [Edit/Preferences/Advanced]. How do we avoid errors if the user chooses to disable one or both of these options?

JavaScript OFF: No problem. Our stylesheet is JavaScript-generated, so no positioned elements are created. The user simply gets the alternate content.

Stylesheets OFF: An error will occur when our script attempts to manipulate the elements. They simply don't exist. We must include a check for the existence of any element that we have created. If this created-by-us-through-stylesheets element exists, then the user has Stylesheets ON. If this element does not exist, then the user has StyleSheets OFF, and we should not proceed with our routine. Choose any positioned element, elAll will do, and simply check for its existence in the beginning of the Navigator-specific part of initIt(), the first function to be executed:

function initIt(){
    if (NS4) {
        if (!document.elAll) return;
        elAll = document.elAll;
        elNews = elAll.document.elNews;
        elGif = elAll.document.elGif;
        imStr = "<IMG SRC='fade.gif'>"
        elGif.document.write(imStr);
        elGif.document.close();
    }
    else {
        elNews.style.filter = "blendTrans(duration=1)"
    }
    newsCount = 0;
    if (finite) loopCount = 0;
    doIt();
    blendTimer = setInterval("doIt()",blendInt*1000)
}

Now we truly have a cross-browser and backward compatible technique, with all the possibilities covered. In our final code page, we will repeat the complete customizable, backward-compatible code.

DHTML Browser Quirks

Navigator 4 Macintosh: It seems there may be a memory leak on this platform version of Navigator 4. Infinite looping of the fader may cause an out of memory error. Limit your maxLoops to 4-5. Finite looping is preferable because, while the fader is a welcome effect for both author and user, infinite looping can be distracting.

Explorer 4 Macintosh: Among the unbelievable amount of unsupported DHTML, including important cross-browser properties such as clip, is the filter property. In this browser, a headline will simply replace the previous one.

In the next two pages, we will repeat the browser-specific code and the complete cross-browser, backward-compatible, customizable version.