DHTML Lab: Dynamic Headline Fader; Cross-Browser Script

Dynamic Headline Fader
creating a cross-browser script

The Stylesheet

We are fortunate, with one exception, as far as the cross-browser stylesheet is concerned. The height property, necessary for Explorer, will not affect Navigator. Conversely, Navigator's layer-background-color, will be ignored by Explorer. The clip property, recognized by Explorer, becomes a redundancy. The extra Navigator element, elGif, will remain, in Explorer, a real but empty element, since we will not write to it in our script. We can easily, therefore, combine the two stylesheets into one:

<STYLE TYPE="text/css">
    #elAll {
        position: relative;
        width: 130;
        height: 40;
        background-color: white;
        layer-background-color: white;
        clip: rect(0 130 40 0);
    }
    #elNews {
        position: absolute;
        width: 130;
        height: 40;
        background-color: white;
        layer-background-color: white;
        clip: rect(0 130 40 0);
    }

    #elGif { position:absolute }
    A.newslink {
        text-decoration: none;
        text-align: left;
        color: black;
        font-size: 9pt;
        font-weight: bold;
        font-style: normal;
        font-family: Arial,Geneva,sans-serif;
        line-height: 10pt;
    }
</STYLE>

The one major omission from the stylesheet is the Explorer filter declaration:

filter:blendTrans(duration=1)
The rule for browser stylesheet parsing is the same as that for HTML: If an unknown or unimplemented property is encountered, ignore it and parse the next one. Unfortunately Navigator chokes on the filter property, although all other unknown properties are properly overlooked. My guess is the non-CSS-standard use of the equal (=) sign. In any case, we cannot include it in our <STYLE>.
We have two other options, however:
declare the filter property in the STYLE= attribute of the DIV tag. That is:
<DIV ID="elNews"
     STYLE="filter:blendTrans(duration=1)">
Navigator ignores it, properly. Don't have an answer for this, except that equal (=) signs abound within tag attribute settings, and this may be the reason why it is parsed without error.

declare the filter property dynamically, in our script.

Since we want to keep all the browser-specific code together, in the script, and the HTML as clean as possible, we will choose this second option.
Writing to the filter Property
Even though the visual and transition filters are many, and a myriad of combinations are possible, Explorer retrieves and sets them all through a single property of an element's style: filter. The filter property is a string corresponding to filters set for that element. Since we have not delved into the complexities of filters in the present column, we will only state that to set the Blend Transition Filter for elNews, we simply use the statement:
elNews.style.filter = "blendTrans(duration=1)"
We'll insert it into our script, further down.
The HTML
The HTML insertion of the fader elements remains in its Navigator version.
.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>
.
. subsequent page HTML
.
The Script
There is not much to be said about the cross-browser script. It is purely a combination of the browser-specific scripts, using if...else statements to direct the user's browser to the relevant statements.
<SCRIPT LANGUAGE="JavaScript1.2" SRC="news.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
arNews = new Array();
for (i=0; i<arURL.length; i++) {
    arNews[i] = new Array();
    arNews[i][0] = prefix + arURL[i];
    arNews[i][1] = arTXT[i];
}
blendInt = 5;
maxLoops = 2;
finite = (maxLoops > 0) ? 1 : 0;
boxHgt = 40;
blendDur = 1;
slideInc = 2;
slideInt = (blendDur/(boxHgt/slideInc))*1000;
window.onload = initIt;
function initIt(){
    if (NS4) {
        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)
}
function doIt() {
    if (finite && loopCount==maxLoops) {
        clearInterval(blendTimer);
        return;
    }
    if (NS4) elGif.top = 0;
    newsStr = "<A CLASS=newslink "
            + "HREF=" + arNews[newsCount][0] + ">"
            + arNews[newsCount][1] + "</A>"
    if (NS4) {
        with (elNews.document) {
            write(newsStr);
            close();
        }
    }
    else {
        elNews.filters.blendTrans.Apply();
        elNews.innerHTML = newsStr;
        elNews.filters.blendTrans.Play();
    }
    newsCount++;
    if (newsCount == arNews.length) {
        newsCount=0;
        if (finite) loopCount++;
    }
    if (NS4) slideIt();
}

function slideIt(){
    elGif.top += slideInc;
    if (elGif.top >= boxHgt) return;
    setTimeout("slideIt()",slideInt);
}
//-->
</SCRIPT>
As we have seen, the fader can be customized by changing the values of style properties and script variables. This method can be clumsy, however, so let's make it easy!