DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.01 | 11 | WebReference

DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.01 | 11

Logo

Dynamic Headline Fader, Version 2.01
ensuring foreign script compatibility


The Problem

Thanks to Carlos E. Fuentes for writing in with this problem:

I have been trying to use both the HierMenus and Fader on the same page... I have seen the article demonstrating how to do this, but it has not worked for me.

Carlos is, of course, referring to the Hierarchical Menus FAQ #3, where we discussed how to include the menu script in the same page with other scripts that have a conflicting onload handler for the window or page BODY.

Even if the onload handling is resolved, as per the FAQ, the fader will not work with the menus beause of other conflicts:

  1. Both scripts have a function with the same name, i.e. startIt()

    The second instance of startIt() overwrites the first instance of startIt(), so only one of the two scripts will work.

  2. Both scripts have similar parameter-variable naming schemes, for example: backCol, borCol, etc.

    The second instance of these variables will, again, overwrite the first instance. This behavior will not prevent script execution, but will change styling in one of the two scripts.

The Solution

We must rename the fader functions and parameter variables in a unique way, one that other scripts will probably not use, to avoid function name conflict.

Version 2.0 functions:Version 2.01 functions:
countLoads()
initIt()
startIt()
doIt()
fadeIt()
slideIt()
endIt()
FDRcountLoads()
FDRinit()
FDRstart()
FDRdo()
FDRfade()
FDRslide()
FDRend()
Version 2.0 parameter variables:Version 2.01 parameter variables:
boxWid
boxHgt
borWid
borCol
borSty
backCol
boxPad
txtAln
linHgt
fntFam
fntCol
fntSiz
fntWgh
fntSty
lnkCol
lnkDec
hovCol
gifSrc
gifInt
blendInt
blendDur
maxLoops
endWithFirst
replayOnClick
FDRboxWid
FDRboxHgt
FDRborWid
FDRborCol
FDRborSty
FDRbackCol
FDRboxPad
FDRtxtAln
FDRlinHgt
FDRfntFam
FDRfntCol
FDRfntSiz
FDRfntWgh
FDRfntSty
FDRlnkCol
FDRlnkDec
FDRhovCol
FDRgifSrc
FDRgifInt
FDRblendInt
FDRblendDur
FDRmaxLoops
FDRendWithFirst
FDRreplayOnClick

And since we are on this renaming binge, let's also rename the global variables in fader.js:

Version 2.0 global variables:Version 2.01 global variables:
finite
isOver
loadCount
fadeImg
FDRfinite
FDRisOver
FDRloadCount
FDRfadeImg

Additional Considerations

Unfortunately, when trying to combine scripts, there are other considerations.

For example:

  1. Even though we may resolve the onload conflict and the naming scheme conflict, there might be other event conflicts. In the case of the Hierarchical Menu and Fader scripts, they both have window resize handlers for Navigator. These handlers are not identical. The HM version includes the statements in the fader version, plus a few more. Therefore, the HM resize handler should be the one to kick in. The fader version should be omitted.

  2. The two scripts may not be supported by the same browsers. The HM Script, for example, is not loaded by IE MAC, yet the Fader is. In this case, must cancel event handling duplications, conditionally.

  3. Try not to combine scripts that begin timers upon load, unless you are familiar with the code and are happy that the timers will not conflict.

In short, we can optimize a script for easier page co-existence with other scripts, but some author intervention might be required. There is no sure-fire way to shape a script so that it will co-reside comfortably with other scripts.

The HM and Fader Conflicts Resolved

To help those who would like to use the Hierarchical Menu and Fader scripts, specifically, on the same page, we have obliged by making the necessary modifications for you. A live example is included on the next page.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sep 21, 1999
Revised: Sep 21, 1999

URL: http://www.webreference.com/dhtml/column25/addendum1/fdr201names.html