Dynamic Headline Fader
customizing the fader with option variables

What to Customize?

In order to have a completely portable effect, we need to be able to customize it for each page that uses it. The easiest way to do this is to provide variables for all the parameters that we can set. The values of these variables will then be used to construct our fader. They must appear, therefore, before our fader is defined. Incorporating variables already discussed, we have 14 variables to help customize each use of the fader:

boxWid = 130;      // fader box width (pixels)
boxHgt = 40;       // fader box height (pixels)
backCol = "white"  // fader box background color
blendInt = 5;      // headline display time
blendDur = 1;      // duration of blend/fade effect
maxLoops = 5;      // maximum headline sets displayed

txtDec = "none";   // text decoration of headline
txtAln = "left";   // text alignment
fntCol = "black";  // font color
fntSiz = "8pt";    // font size
fntWgh = "bold";   // font weight
fntSty = "normal"; // font style
fntFam = "Geneva,Arial,sans-serif";
                   // font family
linHgt = "9pt";    // line height (leading)

slideInc = 2;      // NN GIF move increment

Building the Custom Fader

With the parameters set, we must use them to define the fader. We have two options:

1. Elegant but long method:
   Declare the elements in our STYLE omitting the properties to be set using the parameter variables. Then:
   • for Explorer, use the parameter values to dynamically set the style property values.
   • for Navigator, use JavaScript Style Sheets to dynamically define the properties.
   
   
2. Clumsy but short/cross-browser method:
   Use JavaScript to dynamically write a normal CSS stylesheet to our page as it loads.

We will use the second method, previously used in column 12, Expandable Outlines.

We create one long string that contains all of our stylesheet, inserting the parameter variables in the appropriate places. Since all our properties are separated by a semi-colon, and spaces may be necessary, we assign them to variables, to avoid typos:

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

Once complete, the string is written to our page with a simple document.write().

The initIt() function is changed to reflect parameter use. The setting of Explorer's filter property uses the blendDur variable:

function initIt(){
    if (NS4) {
        .
        .
        .
    }
    else {
elNews.style.filter="blendTrans(duration="+blendDur+")"
    }
    .
    .
    .
}

We now have a completely customizable technique. Every page in this column, except for the final code pages, has a customized fader in the left column. The parameters for each version are listed under it. Go through the column, studying the results of each parameter combination. You're sure to find one that you can use or modify for your page(s).

Note: If you change the background color of the fader, make sure you have created an appropriate GIF with the same background color. This is the only limitation, and it applies solely to Navigator.

Possible values for each parameter are listed in our final code page.

Now, what about non-DHTML browsers. What will they see when they load a page with a fader?