DHTML Lab: Dynamic Headline Fader; Navigator 4 Script

To properly use the sliding GIF, we need to know four values:

1. the height of the fader box.
2. the duration of the blend effect
3. the increment that the GIF should move
4. the time interval between GIF moves

The height of our fader box is assigned to boxHgt. The duration of the effect, in seconds, is stored in blendDur. The slide increment, in pixels, is assigned to slideInc. Experiment until you find one that is smooth for your fader. Here, we specify 2 pixel moves. Finally, we divide the height of the fader box (boxHgt) by the slide increment (slideInc). This gives us the number of moves necessary to complete the effect. If we then divide the effect duration (blendDur) by this move count, we get the time interval between moves. This value is converted to milliseconds by multiplying it by 1000 and assigned to slideInt.

Initialization

As with Explorer, we use window.onload to call our first function, initIt(), as soon as our page has loaded. The initIt() function assigns short-hand references to the elements that we have created:

window.onload = initIt;
function initIt(){
    elAll = document.elAll;
    elNews = elAll.document.elNews;
    elGif = elAll.document.elGif;
    imStr = "<IMG SRC='fade.gif'>"
    elGif.document.write(imStr);
    elGif.document.close();
    newsCount = 0;
    if (finite) loopCount = 0;
    doIt();
    blendTimer = setInterval("doIt()",blendInt*1000)
}

The elGif element is then written to dynamically to include the GIF image for the effect. Here, the filename is "fade.gif". The remainder of initIt() is the same as the Explorer version, with an initial call, then repeated calls, to doIt().

The Effect

Our doIt() function, after establishing that it should continue with its statements and a return is not called for, ensures that elGif is placed directly over the headline by setting its top property to 0. We do not have to worry about the z-index, because elGif resides above elNews by virtue of its HTML order. Since it was declared after elNews, it is above elNews.

function doIt() {
    if (finite && loopCount==maxLoops) {
        clearInterval(blendTimer);
        return;
    }

    elGif.top = 0;
    newsStr = "<A CLASS=newslink "
            + "HREF=" + arNews[newsCount][0] + ">"
            + arNews[newsCount][1] + "</A>"

    with (elNews.document) {
        write(newsStr);
        close();
    }
    newsCount++;
    if (newsCount == arNews.length) {
        newsCount=0;
        if (finite) loopCount++;
    }

    slideIt();
}

The newStr variable stores our headline as before, and is written to elNews dynamically using the document.write() method. The same incrementations are performed, and finally slideIt(), a new function, is called to actually move the GIF.

function slideIt(){
    elGif.top += slideInc;
    if (elGif.top >= boxHgt) return;
    setTimeout("slideIt()",slideInt);
}

The top property of elGif is incremented by the value of slideInc, moving it down on the page. If top is now more than the height of the box, the effect is over, as the GIF is outside the box. In this case, the function returns. Otherwise, it calls itself, using the setTimeout() method. This looping back to itself, using setTimeout(), will stop, of course, when elGif is not longer over elNews.

Fairly simple stuff. Now, we can combine the two browser-specific routines to create a cross-browser version.