/****************************************************************************************************** DHTML Show/Hide multi level script written by Mark Wilton-Jones - 2001 ******************************************************************************************************* Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use To use: _________________________________________________________________________ Inbetween the <head> tags, put: <script type="text/javascript" language="javascript1.2"> <!-- //this is optional and therefore does not need to be defined if unwanted var myalternative = "LOCATION OF ALTERNATIVE PAGE, JUST IN CASE THEIR BROWSER DOESN'T GET IT RIGHT"; //--> </script> <script src="PATH TO SCRIPT/showhidelevels.js" type="text/javascript" language="javascript1.2"></script> if you haven't got an alternative (You should have one for all those people out there who can't use JavaScript anyway . . .), simply omit the line defining var myalternative; _________________________________________________________________________ Now create the bits that you want to show and hide (only one will be shown at a time): <div id="ID OF DIV" style="position:absolute;left:20px;top:25px;visibility:hidden;"> contents go in here </div> You can change the numbers after the 'left:' and 'top:' bits to position it on the page The name of the div must contain only letters and numbers (1st character must be a letter) or Mozilla gets it wrong _________________________________________________________________________ To show a div, put: <a href="javascript:showdiv('ID OF DIV',LEVEL);" onmouseover="showdiv('ID OF DIV',LEVEL)">Link words</a> DO NOT leave out the " and ' bits. For the first level produced by the original links, set LEVEL to 1 For the level produced by the first level links, set LEVEL to 2 etc. _________________________________________________________________________ To hide the divs that are showing at level LEVEL+, put: <a href="javascript:hideDivsToLevel(LEVEL);" onmouseover="hideDivsToLevel(LEVEL)">Link Words</a> If a new div is being displayed, the old one will be hidden anyway. _________________________________________________________________________ To hide a div that is showing but has not been set as showing using the script, put: <a href="javascript:hideDivSpecial('ID OF DIV');" onmouseover="hideDivSpecial('ID OF DIV')">Link Words</a> DO NOT leave out the " and ' bits. ******************************************************************************************************* And here's the actual code ******************************************************************************************************/ //You will notice that I never actually detect the browser type, I just //detect its capabilities and then use them. This means that if someone //uses a browser that I don't know, but is able to use either method, it //will still work. window.onerror = null; //initialise all variables var olddiv = new Array(); //this will become a reference to the objects that are being shown or were last shown function getRefToDivNest( divID, oDoc ) { if( !oDoc ) { oDoc = document; } if( document.layers ) { if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else { for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) { y = getRefToDivNest(divID,oDoc.layers[x].document); } return y; } } if( document.getElementById ) { return document.getElementById(divID); } if( document.all ) { return document.all[divID]; } return document[divID]; } function showdiv(thisdiv,mylevel) { //this function shows the div and sets the level that the div exists at to 'mylevel' hideDivsToLevel(mylevel); //first, hide the last one olddiv[mylevel] = getRefToDivNest(thisdiv); //Make the object visible if( olddiv[mylevel].style ) { //DOM compliant olddiv[mylevel].style.visibility = 'visible'; } else { if( olddiv[mylevel].visibility ) { //Netscape and old versions of Mozilla compliant olddiv[mylevel].visibility = 'show'; } else { //Nothing found, no known way of changing the style olddiv[mylevel] = false; notifyFail(); return; } } } function hideDivsToLevel(mylevel) { //hide all the divs that are showing this level and higher if( olddiv[mylevel] ) { //try the next level up first hideDivsToLevel(mylevel+1); //hide the last hidden object that was shown in the current level if( olddiv[mylevel].style ) { //DOM compliant olddiv[mylevel].style.visibility = 'hidden'; } else { //Netscape and old versions of Mozilla compliant olddiv[mylevel].visibility = 'hide'; } //No need for else notifyFail() //If it was going to fail, it would have failed while it was being shown } olddiv[mylevel] = false; } function hideDivSpecial(specialDiv) { //hide a div, bypassing levels specialDiv = getRefToDivNest(specialDiv); if( specialDiv.style ) { //DOM compliant specialDiv.style.visibility = 'hidden'; } else { if( specialDiv.visibility ) { //Netscape and old versions of Mozilla compliant specialDiv.visibility = 'hide'; } else { //Nothing found, no known way of changing the style notifyFail(); return; } } } function notifyFail() { //oops, I guess nothing works in this browser if( window.myalternative ) { if( window.confirm( "You are having problems displaying some components of this page.\n"+ "\nWould you like to try the other page design?" ) ) { location.href = myalternative; } } else { window.alert( "You are having problems displaying some components of this page.\n\n"+ "Sorry, but there is not yet an alternative page." ); } }