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

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


Logo

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:

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);
}

Good Fadin'!?.


Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column13/allCode2.html