spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column13

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

Logo

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="http://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


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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