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

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

Logo

Dynamic Headline Fader, Version 3.0
Flippin' the Night Away


 

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.

The In-Page Parameter Variable

We need a new in-page parameter variable to toggle fading/flipping, FDRjustFlip, that takes a Boolean value:

The External Script

Backward Compatibility

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.

Navigator Load Count

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

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

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