| home / experts / dhtml / column27 |
|
 |
Creating a Headline Flipper is of course simpler than building one with effects. We will have to conditionally omit code from our script. It is not a good idea to create a separate script, since we will have to use the same workarounds for the various browsers. The code we will be omitting is minimal, and it is better to have one multi-purpose script that, once-cached, can be used to create different types of headline displays on different pages.
We need a new in-page parameter variable to toggle fading/flipping, FDRjustFlip, that takes a Boolean value:
FDRjustFlip = true;
The headlines will flip between displays.
FDRjustFlip = false;
The headlines will fade (as in previous versions) between displays.
Early on, in fader.js, we add this line for backward compatibility:
FDRjustFlip = (window.FDRjustFlip) ? FDRjustFlip : false;If the FDRjustFlip variable exists, it is assigned its own value; if it doesn't, it is created with a value of false.
Therefore, all your old pages, without FDRjustFlip, will still work as originally intended: with Faders.
In Version 2.01, we loaded the Navigator-specific fade-workaround GIF with these statements, early in fader.js:
if (NS4) {
FDRfadeImg = new Image();
FDRfadeImg.onload = FDRcountLoads;
FDRfadeImg.src = FDRgifSrc;
}
When the image loaded, FDRcountLoads() was called, which was also called upon full-page load. In Version 2.01, FDRcountLoads() looked like this:
function FDRcountLoads() {
if (IE4) {
setTimeout("FDRinit()",1);
}
else {
FDRloadCount++;
if (FDRloadCount==2) { // proceeds only if called twice
...
window resize statements
...
FDRinit();
}
}
}
As noted above, FDRcountLoads() proceeds to call FDRinit(), to initialize the Fader, only when both the GIF and the complete page have loaded (FDRloadCount==2).
When FDRjustFlip is true, we don't need the GIF at all, so we change the NS statements that load it to read:
if (NS4) {
if(FDRjustFlip) {
totalLoads = 1;
}
else {
totalLoads = 2;
FDRfadeImg = new Image();
FDRfadeImg.onload = FDRcountLoads;
FDRfadeImg.src = FDRgifSrc;
}
}
FDRcountLoads() now has a variable, totalLoads, to compare to the number of times it is called:
function FDRcountLoads() {
if (IE4) {
setTimeout("FDRinit()",1);
}
else {
FDRloadCount++;
if (FDRloadCount==totalLoads) {
...
window resize statements
...
FDRinit();
}
}
}
Now, in the case of Navigator, the Fader will be initialized immediately upon page load, if no fade is required, and the GIF will not be loaded. On the next page, more flipping-related Navigator code changes.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999
URL: http://www.webreference.com/dhtml/column27/fade3flip.html
