DHTML Lab: Dynamic Headline Fader; Explorer 4 Script

Dynamic Headline Fader
the script for Explorer 4

It's time to put it all together and create a working script for Explorer. As you will recall, our script, so far, has created a two-dimensional array from the two arrays in our external file. First, we add to this, two global variables that serve as our first customization parameters, and a third that helps us track the headline loops:

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;

The blendInt variable stores the time interval between blends, in seconds. The value of 5, above, will tell our script that every headline should remain on-screen for five seconds before a transition occurs.

Infinite looping can be irritating, and taxes computer memory. We specify how many times the complete set of headlines should be displayed with the maxLoops variable. In our example, we will see every headline two times. A value of 0 or a negative value, for maxLoops, designates continuous headline display until the user leaves the page. We create a third variable, finite, which is true if the maxLoops value is greater than 0, and false if anything else.

Initialization

We want our fader to begin as soon as our page is loaded, so our initialization function, initIt(), must be called as soon as the window's onload event is fired. Although onload and window.onload are ostensibly the same statement, given the redundancy of the window object, using window.onload is better form, and avoids some obscure cross-browser platform-specific problems.

window.onload = initIt;
function initIt(){
    newsCount = 0;
    if (finite) loopCount = 0;
    doIt();
    blendTimer = setInterval("doIt()",blendInt*1000)
}

When initIt() is called, it first declares newsCount, to track the headlines in our array, and, if we have specified a finite number of loops, loopCount, to track the complete headline set looping.

A second function, doIt(), is called to display our first headline. Then, using the setInterval() method, we call doIt() continuously at the interval stored in blendInt. Since setInterval() accepts an interval specified in milliseconds, we multiply blendInt by 1000. A timer variable, blendTimer, is declared to store the setInterval() call. Details of the setInterval() method have been discussed previously in Column 5, and by Doc JavaScript in the Rotating Text Banners column.

Blending

The doIt() function performs the remainder of the requisite statements for our effect. First it checks if the maximum set looping has been reached. If it has, the repeated calls to doIt() are cancelled by using the clearInterval() method, and the function returns. This, of course, ends the effect. On the first calls to doIt(), the maximum loops will not have been reached, so the function will move on to execute the rest of its sttements.

function doIt() {
    if (finite && loopCount==maxLoops) {
        clearInterval(blendTimer);
        return;
    }
// Note: the next three lines could be on one
    newsStr = "<A CLASS=newslink "
            + HREF=" + arNews[newsCount][0] + ">"
            + arNews[newsCount][1] + "</A>"
    elNews.filters.blendTrans.Apply();
    elNews.innerHTML = newsStr;
    elNews.filters.blendTrans.Play();
    newsCount++;
    if (newsCount == arNews.length) {
        newsCount=0;
        if (finite) loopCount++;
    }
}

A variable, newStr, is created to store the headline HTML, which is simply:

• <A - the anchor start tag
• CLASS = newslink - this gives the contained link text the attributes we set in our stylesheet
• HREF = arNews[newsCount][0] - using the newsCount variable we grab the URL element from arNews
• >arNews[newsCount][1] - ...and the relevant headline
• </A> - the anchor end tag

Next, we start the blend transition. The Apply() method freezes the present state. Using innerHTML, we update elNews to contain our headline. Then, with Play(), we blend the two together.

After the transition, we simply increment newsCount to point to the next headline.

If newsCount is equal to the length of the arNews array, it means we have displayed a complete set of headlines. In that case, newsCount is reinitialized to 0, to move through the headlines again. If we have set a maximum number of headline sets, we also increment loopCount, to reflect the completion of a set.

Our Explorer version is done. The full script is repeated on our first code page. Now, let's move on to a Navigator version.