DHTML Lab: Dynamic Headline Fader; The JavaScript Array

Dynamic Headline Fader
get your headlines ready

The headline fader can of course display simple static headlines or live linked headlines. Our example demonstrates the latter. All the examples on the left of every page use the same external source file to access the headlines. This external JavaScript file, which we call news.js, looks like this:

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"
)

Nothing more than two simple one-dimensional JavaScript arrays. The first, arURL, contains the URLs that should be used in the HREF attribute of the A tag. The second, arText, contains the actual headline text to be displayed.

These headlines are actual internet news headlines from Mecklermedia's internetnews.com. They all have the same base URL: https://www.internetnews.com/, so to avoid entering it each time, we declare a variable, prefix, to store it. Later, we will append it to each element of arURL. The prefix variable, therefore, is more-or-less a JavaScript equivalent of the BASE HREF= tag. If, in your custom fader, the URLs are from different servers, the prefix declaration may be omitted, or the statement changed to:

prefix = "";

if you want to keep the same code structure as our example. Don't forget that without a prefix, all elements of arURL must point to valid URLs, whether absolute or relative.

If, conversely, you want static, non-linked headlines, use only the arText array.

Whatever you decide, your HTML page must load the external file:

<SCRIPT LANGUAGE="JavaScript1.2"
        SRC="news.js"></SCRIPT>

The in-page SCRIPT

The first task of our in-page script is to create a single two-dimensional array from the arrays in the external script. This new array, which we will reference when building the fader, is called arNews:

<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];
}
</SCRIPT>

Every element of arNews has two elements of its own: the complete URL and the headline. The complete URL is created by combining prefix with the elements of arURL. If prefix has a value of "", just the arURL element is included.

We now have a two-dimensional array containing all the information we need for updating the fader. Next, we have to create the fader.