DHTML Lab: Dynamic Headline Fader; Backward Compatibility | WebReference

DHTML Lab: Dynamic Headline Fader; Backward Compatibility


Logo

Dynamic Headline Fader
accounting for older browser versions

DHTML News Fader


Parameters used in this example:

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

Timing:
• blend interval: 3;
• blend duration: 2;
• loops: 2;

Link Text:
• text decoration: underline;
• text alignment: center;
• font color: green;
• font size: 10px;
• font weight: normal;
• font style: normal;
• font family: Arial,Geneva,sans-serif;
• line height: 11px;

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:

DHTML News Fader
<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:

DHTML Fader-Anim GIF version
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.


Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column13/fadeBack.html