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

Dynamic Headline Fader, Version 3.0
excluding the NS GIF for flipping

GIF Creation

In Version 2.01, a new layer was created to contain and manipulate the fade-workaround GIF. The relevant statements were in the FDRinit() function:

elGif = new Layer(contWidth,elCont);
imStr = "<IMG SRC=" + FDRgifSrc +" WIDTH="
     + Math.max(FDRfadeImg.width,(FDRboxWid - (FDRborWid*2)))
     +">"
with (elGif) {
   document.write(imStr);
   document.close();
   moveAbove(elNews);
}
imgHeight = elGif.document.height;
slideInc = (imgHeight/(FDRblendDur*1000/FDRgifInt));
startTop = -(imgHeight - FDRboxHgt);

The above statements should only kick in if a fader is called for, that is, if FDRjustFlip is false.

if (!FDRjustFlip) {
  elGif = new Layer(contWidth,elCont); 
  imStr = "<IMG SRC=" + FDRgifSrc +" WIDTH="
        + Math.max(FDRfadeImg.width,(FDRboxWid-(FDRborWid*2)))
        +">"
  with (elGif) {
      document.write(imStr);
      document.close();
      moveAbove(elNews);
  }
  imgHeight = elGif.document.height;
  slideInc = (imgHeight/(FDRblendDur*1000/FDRgifInt));
  startTop = -(imgHeight - FDRboxHgt);
}

GIF Positioning

Whenever a fade transition begins, the GIF layer is re-positioned and made visible to hide the displayed headline with these statements in FDRfade():

if (NS4) {
    elGif.top = startTop;         // GIF is positioned
    elGif.visibility = "inherit"; // and made visible
    elNews.visibility = "hide";
    with (elNews.document) {
        write(newsStr);
        close();
    }
    elNews.visibility = "inherit";
}

Again, these statements should not be executed if we want to flip between headlines, so in Version 3, they are executed conditionally:

if (NS4) {
    if (!FDRjustFlip) {
        elGif.top = startTop;
        elGif.visibility = "inherit";
    }
    elNews.visibility = "hide";
    with (elNews.document) {
        write(newsStr);
        close();
    }
    elNews.visibility = "inherit";
}

GIF Movement

To achieve the fade-workaround, by moving the GIF vertically, FDRslide() is called at the end of FDRfade():

function FDRfade() {
    .
    .
    .
    if (NS4) FDRslide();
}

Of course, in Version 3, we add a condition:

function FDRfade() {
    .
    .
    .
    if (NS4 && !FDRjustFlip) FDRslide();
}

We have now ensured that Navigator will not load the GIF image required for the fade workaround, and will not execute any GIF-related statements. Consequently, the Fader display will flip between headlines. On the next page, we'll make a couple of flipping-related Explorer code changes.

Produced by Peter Belesis and

URL: http://www.webreference.com/dhtml/column27/fade3flipns.html