| home / experts / dhtml / column27 |
|
 |
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.
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:
FDRhdlineCount = 1;
One headline will display.
FDRhdlineCount = 3;
Three headlines will display.
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.
Recall that every time we switch update display, the FDRdo() function is called. In Version 2.01,
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
function FDRdo() {
if (FDRfinite && loopCount==FDRmaxLoops) {
FDRend();
return;
}
FDRfade();
if (newsCount == arNews.length) {
newsCount = 0;
if (FDRfinite) loopCount++;
}
}
Every time
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();
}
Now, let's build the display string in
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999
URL: http://www.webreference.com/dhtml/column27/fade3hdline.html
