DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.0 | 12

Dynamic Headline Fader, Version 2.0
the in-page script

Our in-page script begins, naturally, with our browser variables:

NS4 = (document.layers);
IE4 = (document.all);

We only need to differentiate between Navigator 4 and Explorer 4+, so only NS4 and IE4 are defined.

The Parameter Variables

As with Version 1, all pages that include a fader must also include a set of parameter variables, that define the fader's look and behavior.

The fader script itself is, of course, included as an external file. By placing the parameters in-page, we can specify a different look and behavior for fader elements on different pages, while using the same external script.

If you are only using the fader once, or if the fader should look and act the same on all pages, then the parameter variables can be included in the external fader script.

A set of parameter variables looks like this:

boxWid = 150;
boxHgt = 100;
borWid = 10;
borCol = "red";
borSty = "solid";
backCol = "white";
boxPad = 12;
txtAln = "center";
linHgt = "11pt";
fntFam = "Geneva,Arial,sans-serif";
fntCol = "blue";
fntSiz = "10pt";
fntWgh = "bold";
fntSty = "normal";
lnkCol = "black";
lnkDec = "underline";
hovCol = "red";
gifInt = 60;
gifSrc = "fade.gif";
blendInt = 1;
blendDur = 1;
maxLoops = 1;
endWithFirst = false;
replayOnClick = false;

The parameter variables are discussed in detail on the next page.

The External Scripts

Like Version 1, the fader requires two external scripts:

1. news.js - this stores the headline or text display array.
2. fader.js - the fader script itself, which styles the fader and controls text display and looping.

These are included in our page in the usual way. Since the LANGUAGE attribute has a value of JavaScript1.2, the enclosed script is available to only DHTML browsers.

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='news.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='fader.js'><\/SCRIPT>");
//-->
</SCRIPT>

We have now included a fader in our page. Before discussing the external files, let's take a closer look at the parameter variables.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sep 07, 1999
Revised: Sep 07, 1999

URL: https://www.webreference.com/dhtml/column25/fade2params.html