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

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

Logo

Dynamic Headline Fader, Version 2.0
Explorer initialization


The second half of initIt() looks like this:

   else {                            &lt-- meaning "if IE4"
      if (!window.elFader) return;
      elFader.innerHTML = "";
      if (!document.styleSheets.length) document.createStyleSheet();
      with (document.styleSheets(document.styleSheets.length-1)) {
         addRule("A.newslink","text-decoration:"+lnkDec+";color:"+ lnkCol);
         addRule("A.newslink:hover","color:"+ hovCol);
      }
      
      with (elFader.style) {
         width=boxWid;
         height=boxHgt;
         backgroundColor=backCol;
         overflow="hidden";
         color=fntCol;
         fontWeight=fntWgh;
         fontSize=fntSiz;
         fontStyle=fntSty;
         fontFamily=fntFam;
         lineHeight=linHgt;
         textAlign=txtAln;
         cursor = "default";
         visibility = "visible";
         borderWidth = borWid;
         borderStyle = borSty;
         borderColor = borCol;
         padding = boxPad;   
         filter = "blendTrans(duration=" + blendDur + ")";
      }
   
      elFader.onselectstart = function(){return false};
   }
   elFader.onmouseover = function(){
      isOver = true;
   }
   elFader.onmouseout = function(){
      isOver = false;
      status = "";
   }
   startIt(0);
}

So, first we check for the existence of elFader, just in case our script is running in a page without a fader element. If it doesn't exist, we return:

if (!window.elFader) return;

Then, like in the NS code, we clear elFader of any content. This time we can use an empty string:

elFader.innerHTML = "";

For Explorer, we do not need to create the two different classes, like we did for Navigator. We can simply style the fader using the parameter values, and any text written into it will inherit this styling. The exception is any link written into the fader. Links need the lnkDec and lnkCol values, as well as the hovCol value, for the link's hover pseudoclass.

Thus, we need to create one class, newslink, for the links. We first check to see if there are any stylesheets in the page. If none exist, we create one. This stylesheet-creation-on-the-fly has been discussed in DHTML Diner:

if (!document.styleSheets.length) document.createStyleSheet();

We can then add two style rules to the last stylesheet in the page, to define the newslink class:

with (document.styleSheets(document.styleSheets.length-1)) {
   addRule("A.newslink","text-decoration:"
                  + lnkDec + ";color:" + lnkCol);
   addRule("A.newslink:hover","color:" + hovCol);
}

Now we simply apply the style-related parameters to elFader. Along the way, we make it visible, and set the filter property to use the Blend Transition

with (elFader.style) {
   width = boxWid;
   height = boxHgt;
   backgroundColor = backCol;
   overflow = "hidden";
   color = fntCol;
   fontWeight = fntWgh;
   fontSize = fntSiz;
   fontStyle = fntSty;
   fontFamily = fntFam;
   lineHeight = linHgt;
   textAlign = txtAln;
   cursor = "default";
   visibility = "visible";
   borderWidth = borWid;
   borderStyle = borSty;
   borderColor = borCol;
   padding = boxPad;   
   filter = "blendTrans(duration=" + blendDur + ")";
}

Since we don't want the user to inadvertently highlight the text in the fader by dragging the mouse, we set elFader's onselectstart handler to return false.

elFader.onselectstart = function(){return false};

Final Cross-Browser Statements

We want to know when the user's mouse is over the fader so we use the onmouseover and onmouseout handlers to toggle the value of isOver:

elFader.onmouseover = function(){
   isOver = true;
}
elFader.onmouseout = function(){
   isOver = false;
   status = "";
}

In the case of the mouseout, we also clear the status bar of any link URL that might be displayed.

Finally, we are ready to start fading. We call the startIt() function, passing one argument, the index of the arNews array from which we want the display to begin. Since this is our first time through, we pass 0 (the first array element):

startIt(0);

On the next page we'll start following the fader through the steps necessary for the transitions.


Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column25/fade2initie.html