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

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

Logo

Dynamic Headline Fader, Version 3.0
when one is not enough


 

There have been requests for the ability to display more than one headline at a time in our Fader. The inclusion of this new feature is fairly straightforward.

The In-Page Parameter Variable

Once again, we need a new in-page parameter variable to store the desired number of headlines to display, FDRhdlineCount, which of course takes an integer value:

The External Script

Backward Compatibility

We again include a line for backward compatibility in fader.js:

FDRhdlineCount = (window.FDRhdlineCount) ? FDRhdlineCount : 1;

If the FDRhdlineCount variable exists, it is assigned its own value; if it doesn't, it is created with a value of 1. Old pages, without FDRhdlineCount, will still work as originally intended: displaying a single headline at a time.

Headline Item Incrementation

Recall that every time we switch update display, the FDRdo() function is called. In Version 2.01, FDRdo() looked like this:

function FDRdo() {
    if (FDRfinite && loopCount==FDRmaxLoops) {
        FDRend();
        return;
    }
    FDRfade();
    newsCount+=2;   // arNews array pointer incremented
    if (newsCount == arNews.length) {
        newsCount = 0;
        if (FDRfinite) loopCount++;
    }
}

Notice that we called FDRfade() to perform the transition between displays, then incremented newsCount, which points to which array items from arNews we should use. Remember that each displayed item accounts for two array elements, so we increment newsCount by 2 (newsCount+=2). If we are to display multiple headlines, the incrementation will vary and, as we'll see later, it is best done elsewhere. In Version 3, therefore, we omit the incrementation statement from FDRdo():

function FDRdo() {
    if (FDRfinite && loopCount==FDRmaxLoops) {
        FDRend();
        return;
    }
    FDRfade();
    if (newsCount == arNews.length) {
        newsCount = 0;
        if (FDRfinite) loopCount++;
    }
}

A New Function

Every time FDRdo() is called, it in turn calls FDRfade(), if a transition is called for. If not, it calls FDRend(). Our next step is to modify FDRfade(), which currently looks like this:

function FDRfade(){
   dispStr = arNews[newsCount];
   linkStr = arNews[newsCount+1];
   isLink = linkStr.length;
   if (isLink) {
      newsStr = "<A CLASS=newslink "
              + "HREF='" + prefix + linkStr + "'>"
              + dispStr + "</A>"
   }
   else {
      newsStr =
        (NS4) ? ("<P CLASS=nolink>"+dispStr+"</P>") : dispStr;
   }
   if(IE4mac) newsStr += "<BR>"
   if (NS4) {
      if (!FDRjustFlip) {
         elGif.top = startTop;
         elGif.visibility = "inherit";
      }
      elNews.visibility = "hide";
      with (elNews.document) {
         write(newsStr);
         close();
      }
      elNews.visibility = "inherit";
   }
   else {
      if(IEhasFilters)elFader.filters.blendTrans.Apply();
      elFader.innerHTML = newsStr;
      if(IEhasFilters)elFader.filters.blendTrans.Play();
   }
   window.status =
      (FDRisOver && isLink) ? (prefix + linkStr) : "";
		
   if (NS4 && !FDRjustFlip) FDRslide();
}

The statements highlighted in green, above, create newsStr, that is, the string to be displayed in the Fader. These statements will be modified, of course, to reflect the possibility of multiple headlines. We can add to our script's elegance by moving these statements to a new function, FDRmakeStr(), which will build the string-to-be-displayed and return it to FDRfade(). The two functions would, therefore, initially look like this:

function FDRmakeStr(){
   tempStr = "";
   dispStr = arNews[newsCount];
   linkStr = arNews[newsCount+1];
   isLink = linkStr.length;
   if (isLink) {
      tempStr += "<A CLASS=newslink "
              + "HREF='" + prefix + linkStr + "'>"
              + dispStr + "</A>"
   }
   else {
      tempStr +=
        (NS4) ? ("<P CLASS=nolink>"+dispStr+"</P>") : dispStr;
   }
   if(IE4mac) tempStr += "<BR>"

   return tempStr;
}
function FDRfade(){
   newsStr = FDRmakeStr();
   if (NS4) {
      if (!FDRjustFlip) {
         elGif.top = startTop;
         elGif.visibility = "inherit";
      }
      elNews.visibility = "hide";
      with (elNews.document) {
         write(newsStr);
         close();
      }
      elNews.visibility = "inherit";
   }
   else {
      if(IEhasFilters)elFader.filters.blendTrans.Apply();
      elFader.innerHTML = newsStr;
      if(IEhasFilters)elFader.filters.blendTrans.Play();
   }
   window.status =
      (FDRisOver && isLink) ? (prefix + linkStr) : "";
		
   if (NS4 && !FDRjustFlip) FDRslide();
}

FDRmakeStr() uses a local variable, tempStr, to build the display string which it passes back to FDRfade(), which in turn assigns it to newsStr, and carries on.

Now, let's build the display string in FDRmakeStr() to reflect multiple headlines.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999

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