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

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

This page includes the browser-specific scripts for Explorer 4 and Navigator 4.

The External Headline Array File

All versions of the fader use this external file format (news.js):

prefix="https://www.internetnews.com/"
arURL = new Array(
  "isp-news/1998/01/2301-high.html",
  "fina-news/1998/01/2301-excite.html",
  "ec-news/1998/01/2301-virtual.html",
  "Reuters/may.html",
  "Reuters/modem.html",
  "Reuters/rumors.html",
  "Reuters/test.html",
  "fina-news/1998/01/2301-usa-loss.html",
  "intl-news/1998/01/2301-nk.html",
  "ec-news/1998/01/2302-net.html",
  "prod-news/1998/01/2301-mesa.html",
  "wd-news/1998/01/2301-snow.html",
  "bus-news/1998/01/2301-shep.html"
)
arTXT = new Array(
  "High-Speed Hotel Access on the Horizon",
  "Excite Reports Increased Revenues",
  "Virtual Reality E-Shopping Site Launches",
  "Microsoft May Face New Antitrust Case",
  "Ameritech in Compaq High-Speed Modem Deal",
  "Microsoft Declines Comment on BT Rumors",
  "Integrion Says Three Banks Test Electronic System",
  "Silicon Graphics Posts $31M Loss",
  "N2K, StarMedia in Lat. Amer. E-Commerce Initiative",
  "CitX, Priority One Launch Net Payment System",
  "MESA Suite Brings Self-Service to the Enterprise",
  "Snowbound Releases Raster Imaging Development Tool",
  "Net Shepherd Signs Revenue Deal With AltaVista"
)

Internet Explorer 4

This code is specific to Explorer 4. No browser-detection is included.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#elAll {
    position: relative;
    width: 130;
    height: 40;
    background-color: white;
}
#elNews {
    position: absolute;
    width: 130;
    height: 40;
    background-color: white;
    filter: blendTrans(duration=1);
}
A.newslink {
    text-decoration: none;
    text-align: left;
    color: black;
    font-size: 8pt;
    font-weight: bold;
    font-style: normal;
    font-family: Arial,Geneva,sans-serif;
    line-height: 9pt;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="news.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
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;
window.onload = initIt;
function initIt(){
    newsCount = 0;
    if (finite) loopCount = 0;
    doIt();
    blendTimer = setInterval("doIt()",blendInt*1000)
}
function doIt() {
    if (finite && loopCount==maxLoops) {
        clearInterval(blendTimer);
        return;
    }
    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++;
    }
}
</SCRIPT>
</HEAD>
<BODY>
.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNews"></DIV>
</DIV>
.
. subsequent page HTML
.
</BODY>
</HMTL>

Netscape Navigator 4

This code is specific to Navigator 4. No browser-detection is included.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
#elAll {
    position: relative;
    width: 130;
    layer-background-color: white;
    clip: rect(0 130 40 0);
}
#elNews {
    position: absolute;
    width: 130;
    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: 8pt;
    font-weight: bold;
    font-style: normal;
    font-family: Arial,Geneva,sans-serif;
    line-height: 9pt;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="news.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
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(){
    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)
}
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();
}
function slideIt(){
    elGif.top += slideInc;
    if (elGif.top >= boxHgt) return;
    setTimeout("slideIt()",slideInt);
}
</SCRIPT>
</HEAD>
<BODY>
.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>
.
. subsequent page HTML
.
</BODY>
</HMTL>

The Super-Duper Version

Our final page includes all the options discussed in this column.

Produced by Peter Belesis and

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