JavaScript and AJAX Forum

function reDo() { window.location.reload(); } window.onresize = reDo; //Define global variables var timerID = null; var timerOn = false; var timecount = 1000; // Change this to the time delay that you desire var what = null; var newbrowser = true; var check = false;

Here we are defining some global variables that we will use in the script. The most important one is the timecount variable – this is the delay (in milliseconds) that will be used to hide layers after the user has moused away from them.

The reDo() function is to accommodate browsers that will not dynamically regenerate the DOM when the browser window has been resized – so we force it to do so.

function init() { if (document.layers) { layerRef="document.layers"; styleSwitch=""; visibleVar="show"; screenSize = window.innerWidth; what ="ns4"; } else if(document.all) { layerRef="document.all"; styleSwitch=".style"; visibleVar="visible"; screenSize = document.body.clientWidth + 18; what ="ie4"; } else if(document.getElementById) { layerRef="document.getElementByID"; styleSwitch=".style"; visibleVar="visible"; what="dom1"; } else { what="none"; newbrowser = false; } check = true; }

The function init() determines for us what browser version that we are dealing with and assigns a values to the variables what, layerRef, styleSwitch and visibleVar, which we will use in our layer visibility toggling functions. We also assign the Boolean value ‘true’ to the check variable.

Armed with this information we can now get stuck in to the meat of the script.

// Toggles the layer visibility on function showLayer(layerName) { if(check) { if (what =="none") { return; } else if (what == "dom1") { document.getElementById(layerName).style.visibility="visible"; } else { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); } } else { return; } }

First, we make sure that the init() function has done it’s job with if(check) – this looks to see if the variable check is true, and then works it’s way through the function. Our first port of call is for DOM1 compliant browsers, where we set the visibility of the layer to visible. For all other browsers we make use of the information gleaned in the init() function. We evaluate the layerRef variable value (document.all for old IE browsers or document.layers for Netscape 4.x), with the layer name, add in the styleSwitch value (.style for old IE and nothing for NN4.x). This eval command allows us to dynamically build the correct command for the appropriate browser.

// Toggles the layer visibility off function hideLayer(layerName) { if(check) { if (what =="none") { return; } else if (what == "dom1") { document.getElementById(layerName).style.visibility="hidden"; } else { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); } } else { return; } }

The hideLayer function is almost identical to the showLayer function in it’s working, except that it changes the visibility property to hidden.

function hideAll() { hideLayer('layer1'); hideLayer('layer2'); hideLayer('layer3'); //Put all layers used in the nav here. //Copy the hideLayer() function above. }

This function allows us to hide every layer used in out menu system in one fell swoop! This means that we can make sure that all layers are turned off, before making the appropriate layer visible. All you need to do is call the hideLayer function for each layer used in your menu system.

function startTime() { if (timerOn == false) { timerID=setTimeout( "hideAll()" , timecount); timerOn = true; } }

This function starts the timer to hide every layer. We use this function to turn all layers off, if the user has moused away from them for more than out timecount value (set at 1000miliseconds in the global variable section)

function stopTime() { if (timerOn) { clearTimeout(timerID); timerID = null; timerOn = false; } }

Similarly, the stopTime function stops the timer altogether.

function onLoad() { init(); }

This final function runs the init function when the page loads. We also use an onLoad event in the body tag to double check this.

<script type="text/javascript" src="nav.js"></script>

Then, in the body tag, run the init() function:

onLoad="init();"

Then, for the object that is the trigger for the menu use the following code in the <a> tag:

onMouseOver="hideAll(); showLayer('layerName'); stopTime()" onMouseOut="startTime();"

hideAll() hides all layers specified in the hideAll() function in the .js file. (NB: Don’t forget to edit this and insert all layers that should be controlled by this function).

stopTime() stops the timer to hide all layers. This is when the user rolls out of the layer, after a time delay all layers hide.

showLayer('<layerName>') triggers the showing of the layer.

startTime() restarts the timer.

You need to create the layers which are acting as the drop down menu. The ID must be the same as that called in the hideAll() function and the showLayer() and hideLayer() functions.

Put whatever you need in these layers, and then position them so that they are underneath (for vertical menu popups) or beside (for horizontal menu popups) the trigger object.

[edited by: tedster at 4:02 am (utc) on June 12, 2003]