DHTML Lab: Dynamic Headline Fader; Customization
Dynamic Headline Fader
| |||
Parameters used in this example: General: Timing: Link Text: |
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 FaderWith the parameters set, we must use them to define the fader. We have two options:
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? |
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Jan. 28, 1998
Revised: Feb. 03, 1998
URL: https://www.webreference.com/dhtml/column13/fadeOpt.html