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

Dynamic Headline Fader, Version 2.0
Navigator initialization

The initIt() function is our longest fuction, although it is not complex by any means. After a single cross-browser statement, it branches into browser-specific code, returning for a couple of cross-browser statements at the end.

The first half of the function looks like this:

function initIt(){
   if (!window.arNews) return;
   if (NS4) {
      if (!document.elFader) return;
      with(document.classes.newslink.A) {
         textDecoration = lnkDec;
         color = lnkCol;
         fontWeight = fntWgh;
         fontSize = fntSiz;
         fontStyle = fntSty;
         fontFamily = fntFam;
         lineHeight = linHgt;
         textAlign = txtAln;
      }
      with(document.classes.nolink.P) {
         color = fntCol;
         fontWeight = fntWgh;
         fontSize = fntSiz;
         fontStyle = fntSty;
         fontFamily = fntFam;
         lineHeight = linHgt;
         textAlign = txtAln;
      }
      elFader = document.elFader;
      with (elFader) {
         document.write(" ");
         document.close();
         bgColor = borCol;
         clip.width = boxWid;
         clip.height = boxHgt;
      }
      contWidth = boxWid - (borWid*2);
      contHeight = boxHgt - (borWid*2);
      elCont = new Layer(contWidth,elFader);
      with (elCont) {
         top = borWid;
         left = borWid;
         clip.width = contWidth;
         clip.height = contHeight;
         bgColor = backCol;
         visibility = "inherit";
      }
      newsWidth = contWidth - (boxPad*2);
      newsHeight = contHeight - (boxPad*2);
      elNews = new Layer(newsWidth,elCont);
      with (elNews) {
         top = boxPad;
         left = boxPad;
         clip.width = newsWidth ;
         clip.height = newsHeight;
      }
      
      elGif = new Layer(contWidth,elCont); 
      imStr = "<IMG SRC=" + gifSrc +" WIDTH="+
            Math.max(fadeImg.width,(boxWid - (borWid*2))) +">"
      with (elGif) {
         document.write(imStr);
         document.close();
         moveAbove(elNews);
      }
      imgHeight = elGif.document.height;
	
      slideInc = (imgHeight/(blendDur*1000/gifInt));
      startTop = -(imgHeight - boxHgt);
      elFader.visibility = "show";
    }
    ...
}

First, we check for the existence of the requisite array, arNews. If for some reason it doesn't exist, the fader is useless, so we return from initIt() and nothing else is done:

if (!window.arNews) return;

The Navigator Initialization

In Navigator, it is possible for users to disable the use of CSS in a page, through the browser preferences. Since our fader element is a CSS positioned element and not a NS layer, it may not have been created, if CSS use is disabled. We therefore check for the existence of a created elFader element:

if (!document.elFader) return;

If it doesn't exist, we can't go on, so we halt execution by returning.

JavaScript Stylesheets

We want to create two style classes:

newslink
this class will be applied to link tags (<A>) when inserted into the fader, and...
nolink
to be applied to paragraph tags (<P>).

In Version 1, we used a clumsy document.write() of a CSS <STYLE> tag. For Version 2, we will create the classes and assign property values, for NS, using JavaScript Stylesheets. If you unfamiliar with JSS, please see our introduction of JSS in Column 18 and our follow-up whine in Column 21.

Therefore, using JSS, we create the two classes and assign the appropriate values stored in our parameter variables to them:

with(document.classes.newslink.A) {
   textDecoration = lnkDec;
   color = lnkCol;
   fontWeight = fntWgh;
   fontSize = fntSiz;
   fontStyle = fntSty;
   fontFamily = fntFam;
   lineHeight = linHgt;
   textAlign = txtAln;
}
with(document.classes.nolink.P) {
   color = fntCol;
   fontWeight = fntWgh;
   fontSize = fntSiz;
   fontStyle = fntSty;
   fontFamily = fntFam;
   lineHeight = linHgt;
   textAlign = txtAln;
}

The Fader Nested Elements

Next, we assign the NS fader element identifier, document.elFader to the simpler one word elFader variable:

elFader = document.elFader;

Then, we style elFader:

with (elFader) {
   document.write(" ");
   document.close();
   bgColor = borCol;
   clip.width = boxWid;
   clip.height = boxHgt;
}

Notice that we first delete any content in the fader element, like the HTML for older browsers. This is accomplished by writing a space to elFader:

   document.write(" ");  <-- NOT AN EMPTY STRING
   document.close();

Very Important
Even though the documentation states that a positioned element (layer) can be cleared using an empty string, do not do it. It can, and will adversely affect Navigator's performance, believe it or not. This might seem ludicrous but if you know how NS handles eval() and document.write() statements internally it makes a lot of sense.
If you want to experiment, change the document.write() being discussed to document.write(""). In Windows NT, you'll notice the following:
the resize handler will not kick in when the browser is resized
close Navigator and check your Task Manager. netscape.exe is still running, and eating up memory. You must manually end the session through brute force by clicking End Task
All this and much more if you use an empty string. Avoid it.

Next, we assign the border color (borCol) as elFader's background color.

   bgColor = borCol;

Since CSS borders and NS layers do not get along, we will fake a border by offsetting any nested elements in elFader. This technique is used extensively in our Hierarchical Menus with great success and stability.

Finally, we clip elFader to the required size:

   clip.width = boxWid;
   clip.height = boxHgt;

Now, we have to build the nested elements dynamically. In Version 1, nested elements were inelegantly hardcoded into the page HTML. The elements are also slightly different this time around. First we create a container element, which will house the text display element. It should be as wide as elFader minus the borders and as high as elFader, again minus the borders. We declare two variables, contWidth and contHeight, to store these values:

contWidth = boxWid - (borWid*2);
contHeight = boxHgt - (borWid*2);

The element is then created as a child of elFader using the new Layer() method, familiar to all our readers. It is sized and given a background color from the backCol parameter:

elCont = new Layer(contWidth,elFader);
with (elCont) {
   top = borWid;
   left = borWid;
   clip.width = contWidth;
   clip.height = contHeight;
   bgColor = backCol;
   visibility = "inherit";
}

elCont contains the text display layer (elNews), which is as wide as elCont minus the padding specified in boxPad and as high as elCont minus the padding. This method for faking padding through creative positioning and clipping was also used successfully in our Menu Script.

newsWidth = contWidth - (boxPad*2);
newsHeight = contHeight - (boxPad*2);
elNews = new Layer(newsWidth,elCont);
with (elNews) {
   top = boxPad;
   left = boxPad;
   clip.width = newsWidth ;
   clip.height = newsHeight;
}

The last element to be created is elGif, which will contain the transparent GIF image used for our transitions. elGif is as wide as its parent, elCont:

elGif = new Layer(contWidth,elCont);

We build an IMG tag on-the-fly using the gifSrc parameter. We also apply a value to the image's width attribute, using this logic: if the fader is wider than the image stretch the image, otherwise leave it at its natural width.

imStr = "<IMG SRC=" + gifSrc +" WIDTH="+
        Math.max(fadeImg.width,(boxWid - (borWid*2))) +">"

The image is then inserted into elGif, and elGif is assured a higher z-index than elNews, which it must cover, through its moveAbove() method.

with (elGif) {
   document.write(imStr);
   document.close();
   moveAbove(elNews);
}

We have now created all the necessary elements for the NS version of the fader. It remains for us to prepare elGif. elGif has expanded to contain the image, so the height of the image is the same as the height of elGif, a value we need for our image movement increments, and one we assign to the imgHeight variable:

imgHeight = elGif.document.height;

We have defined the fade duration in seconds with our blendDur parameter. If we multiply it by 1000, we have the millisecond value. If we then divide this value by gifInt, the desired time interval between GIF moves, we have the number of moves necessary to complete the fade in the desired time. If we continue and divide the pixel height of the image by this value (the number of moves), we have a pixel value for each move. This value is assigned to slideInc.

slideInc = (imgHeight/(blendDur*1000/gifInt));

Now, we determine the elGif starting position, a negative value, since it must exist higher in elFader than elNews, and move down incrementally to produce the fade effect:

startTop = -(imgHeight - boxHgt);

With this done, we can show the fader to the world:

elFader.visibility="show";

Phew! Hope you understood all that. As long as have a grasp of how the GIF is used, it isn't too difficult to follow. I think.

Next, a look at the much simpler IE-specific initialization.

Produced by Peter Belesis and

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

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

Dynamic Headline Fader, Version 2.0Navigator initialization

The Navigator Initialization

JavaScript Stylesheets

The Fader Nested Elements

Find a programming school near you

Dynamic Headline Fader, Version 2.0
Navigator initialization