DHTML Lab: Dynamic Headline Fader; The Complete Code 2/2

Dynamic Headline Fader
SPECIAL EDITION; the director's cut 2/2

To further simplify the inclusion of the fader technique in your pages, we have collected all the non-page-specific code and created a second external file. Therefore to place the fader in a page:

declare your parameter variables in-page;
parameter options have been placed in comments below. Instructions as to the type of value you should insert are in purple. Actual string values that are accepted are in orange.
load the headline arrays and fader script as two external JavaScript files (news.js and fader.js)

All the code is necessary for the cross-browser backward-compatible version. For easier perusal, the parts of the code that apply only to Navigator 4 are in blue. Explorer 4-specific lines are in green.

Page Script and HTML

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
boxWid = 130;      // fader width: pixel integer
boxHgt = 40;       // fader height: pixel integer
backCol = "white"  // fader bgcolor: color name or #RRGGBB
blendInt = 5;      // headline display time: seconds
blendDur = 1;      // duration of blend/fade: seconds
maxLoops = 5;      // maximum headline sets displayed: integer
txtDec = "none";   // text decoration: none | underline
txtAln = "left";   // text alignment: left | right | center | justify
fntCol = "black";  // font color: color name or #RRGGBB
fntSiz = "8pt";    // font size: points or pixels recommended
fntWgh = "bold";   // font weight: normal | bold
fntSty = "normal"; // font style: normal | italic
fntFam = "Geneva,Arial,sans-serif";
                   // font family
linHgt = "9pt";    // line height (leading): normal or points/pixels
slideInc = 2;      // NN GIF move increment: pixels
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='news.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='fader.js'><\/SCRIPT>");
//-->
</SCRIPT>
</HEAD>
<BODY>
.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNoDHTML">alternate HTML goes here</DIV>
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>
.
. subsequent page HTML
.
</BODY>
</HMTL>

The External Files

`news.js`

See previous code page for format

`fader.js`

Can be downloaded in zipped format.

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
semi = ";";
sp = " ";
styleStr = "<STYLE TYPE='text/css'>"
 + "#elAll {"
 + "position:relative;"
 + "width:" + boxWid + semi
 + "height:" + boxHgt + semi
 + "background-color:" + backCol + semi
 + "layer-background-color:" + backCol + semi
 + "clip:rect(0 "+ boxWid + sp + boxHgt + " 0)" + semi
 + "}"
 + "#elNews {"
 + "position:absolute;"
 + "height:" + boxHgt + semi
 + "background-color:" + backCol + semi
 + "layer-background-color:" + backCol + semi
 + "clip:rect(0 "+ boxWid + sp + boxHgt + " 0)" + semi
 + "}"
 + "#elGif {position:absolute}"
 + "#elNoDHTML {position:absolute; visibility:hidden}"
 + "A.newslink {"
 + "text-decoration:"+ txtDec + semi
 + "text-align:"+ txtAln + semi
 + "color:"+ fntCol + semi
 + "font-size:"+ fntSiz + semi
 + "font-weight:"+ fntWgh + semi
 + "font-style:"+ fntSty + semi
 + "font-family:"+ fntFam + semi
 + "line-height:"+ linHgt + semi
 + "}"
 + "</STYLE>";
document.write(styleStr);
finite = (maxLoops > 0) ? 1 : 0;
slideInt = (blendDur/(boxHgt/slideInc))*1000;
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];
}
window.onload = initIt;
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=" + blendDur + ")";
    }
    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);
}