// cbddm.js // V 1.4 // 05/Aug/2002 // (c) Andrew Holt // http://www.andysstuff.co.uk // http://www.dropmenu.co.uk // http://www.webdesignhelp.co.uk // http://www.andys-onestop.co.uk //Decided it was time for the end of the close menu link. //menus will now disappear by themselves when you mouseout //I decided at this point to leave the current menu open if you mouseover the nav header //for the menu that is open. //There is an issue with netscape4x if you are using images as menu headers you must reposition id="navbar" from the table element to the the first TD element otherwise the images won't display. //if you leave the ID="navbar" in the and use text links the first menus item appears out of line with the others. //Just follow this rule - text links - ID goes in table //images - ID goes in first TD //Disappointed that there was no choice but to add layer tags to the html with this update //NS4x cannot detect onmouseover or onmouseout on a div. //only minor changes are required to the html but I think worth the effort. //in the main navbar code change the onmouseover from //onmouseover="toggle('MENUNAME'); return false;" //to //onmouseover="toggle('MENUNAME',1); return false;" //in the menus add onmouseout="killMenu('MENUNAME')" onmouseover="checkMenu();" to the

inside the div tags. The layer tag should be similar to this // //build your menus in the following format //

// // // your menus go here //

// // :) //################################# //04 Aug 2002 //minor bug fix mozilla innerwidth reports the window width inc scrollbar now fixed to use document.body.clientWidth as this reports the correct width // 02 Aug 2002 //I wasn't really that happy about the ns4 compromise //so I have upgraded ns4x functionality //just replace this script with your old one - nonthing else required // fixed the prob with forms // give the form an ID="formhide" // change onload="startup()" to onload="isform=;yes; startup()" // not applicable to ns4 but works in ns6 IE Mozilla and opera //01 Aug 2002 // tidied up opera //20/July/2002 //added donewsitem{} function //call by using 1 = yes there is a news item 0= no news //Add a new style class //#newsitem { //position : absolute; //top : 0px; //left : 0px; //visibility : hidden; //width : 500px; //height : 150px; //} //new vars added to vars.js //these are for news only //var newstimer=8; //in seconds //var newseffect=12;//open and close effect //var newswide=500; //var newshigh=150; //you need to create a div for the news item preferably a table inside the div with widths and height to match the vars and the style dimensions //

Blah

//end //19/July/2002 //added NS6 to browser detect //fixed the problem of menus aligning properly in mozilla and NS6 //vertical menus both mozilla an ns6 required extra padding why who knows:) //horizontal only ns6 required the extra padding hence the NS6 browser detect. //must be the way the browsers handle tables - not to worry its fixed now :) //Added frames and new window support 8/Jul/2002 //You are free to use this script providing you leave all the comments intact //Scripts can end up all over the net and by removing comments you are stopping people from getting proper updates from the author. //End of preaching :) /*Tested in the following browsers Mozilla 1.0 Netscape 6 IE 6 Opera 6 Netscape 4.5 **please note that I will no longer be developing or upgrading this code for Netscape 4x **Netscape 4x is now a well out of date browser that doesn't support current standards **if you are a Netscape 4x user and disagree with me then feel free to let me know I haven't been able to test it out on a MAC yet but if there are any issues with mac browsers then I will certainly update the script once I can get access to one. Please feel free to send me one as a gift in return for this script :) */ /* There is lots you can do with the layout of menus etc If you do something cool then contact me and let me know the url http://www.dropmenu.co.uk Enjoy Andy */ //set some variables var toggleswitch=0; var Mac = (navigator.userAgent.indexOf("mac")!=-1) || (navigator.userAgent.indexOf("Mac")!=-1); var opera = (navigator.userAgent.indexOf('Opera')!=-1); var msie = (navigator.userAgent.indexOf('MSIE')!=-1); //Gecko takes care of latest netscape browsers var moz = (navigator.userAgent.indexOf('Gecko')!=-1); //NS6 var NS6 = (navigator.userAgent.indexOf('Netscape')!=-1 && navigator.userAgent.indexOf('Gecko')!=-1); //nav4 we'll just object detect Nav4x var Nav4 = (document.layers); //opera default install identifies as MSIE and Opera so lets just make sure :) if (opera && msie || opera){var opera=1; msie=0;} //lets make sure that its IE by making sure its not opera spoofing as IE if (msie && !opera){msie=1;} //opera still has some quirks so we'll leave it out of dom for now //its only very minor quirks but depending on your script you might want to fix the opera quirks by detecting opera separately (your choice :) if(msie || moz){var dom =1;} var timerID=null var stopclose=1; var whatsopen = "none"; //NEWLINE var newsonoff=0;//news on or off var operaload=0; //see note in opera fuctions for more details var isform="no"; // see 02/08/2002 update var menutop=0; var menuleft=0; // nav4.x test block if (document.layers) { window.captureEvents(Event.MOUSEMOVE); window.onmousemove=move; } function move(e) { menuleft=e.pageX, menutop=e.pageY; menuleft=menuleft-0;menutop=menutop-0; } //################################################### //we need to make sure all the menus are closed and the filters applied to them when the page loads - if you don't do this you will have to click the buttons twice before menus appear (not what we want) :) function startup(){ if (msie) { for(var i = 0 ; i <= howmanymenus ; i++){ toggle2(menunames[i]);} } else {return false;} } //End Startup function //################################################### //################################################### //this function just works out what we are opening and closing function toggle(whatmenu,isMain){ getpositions(); // I decided to call this here as well so if the browser is resized positions are recalculated. if(newsonoff==1){return false;} //if no menu is open or if the menu is already open then toggle if (isMain==1){ if(timerID){clearTimeout(timerID);} if (whatsopen == "none"){ toggle2(whatmenu); isMain=0; } if(whatsopen == whatmenu){ isMain=0; } if(whatsopen != whatmenu && whatsopen != "none" && isMain==1){ toggle2(whatsopen); toggle2(whatmenu); isMain=0; } return; } if(isMain==0){ if(whatsopen != "none" && isMain!=1){ toggle2(whatmenu); } } } //End of function //################################################### //################################################### // all the opening and closing stuff with different browsers catered for function toggle2(whatmenu) { //Internet Explorer but NOT opera (Operas default install lets it spoof as MSIE which causes probs Only IE handles the transition filters //================================================ if (msie) { if(effectopen != -1 && effectclose != -1){ eval(whatmenu+".filters(0).Apply();"); } if (eval(whatmenu+".style.visibility") == 'hidden') { if(isform=="yes"){document.getElementById('formhide').style.visibility='hidden';} eval(whatmenu+".style.visibility='visible';"); eval(whatmenu+".filters[0].transition=effectopen"); whatsopen=whatmenu; } else { if(isform=="yes"){document.getElementById('formhide').style.visibility='visible';} eval(whatmenu+".style.visibility = 'hidden';"); eval(whatmenu+".filters[0].transition=effectclose"); whatsopen="none"; } eval(whatmenu+".filters(0).Play();"); } //end of IE code //================================================ //================================================ //lets do the Opera stuff // The script works ok in opera but its a bit fussy about the menu being fully openened before trying to close it - nothing important but just thought I'd mention it if (opera) { if (toggleswitch==0) { if(isform=="yes"){document.getElementById('formhide').style.visibility='hidden';} eval(whatmenu+".style.visibility='visible';"); toggleswitch=1; whatsopen=whatmenu; return; } if (toggleswitch==1) { if(isform=="yes"){document.getElementById('formhide').style.visibility='visible';} eval(whatmenu+".style.visibility = 'hidden';"); toggleswitch=0; whatsopen="none"; return; } } //End of opera code //================================================ //================================================ //Lets do the Netscape 4.x browser as well if(Nav4){ if (toggleswitch==0 && whatmenu=="newsitem"){document['newsitem'].visibility='visible';toggleswitch=1;return; } if (toggleswitch==1 && whatmenu=="newsitem"){document['newsitem'].visibility='hidden';toggleswitch=0;return; } if (toggleswitch==0){ if(menudir =="hor"){ x1=buttonwidth/2; menuleft-=x1; eval("document['"+whatmenu+"'].top="+menutop+"+"+buttonheight); eval("document['"+whatmenu+"'].left="+menuleft+"+10"); } if(menudir =="ver"){ eval("document['"+whatmenu+"'].top="+menutop); eval("document['"+whatmenu+"'].left="+menuleft+"+20"); } document.layers[whatmenu].visibility='visible'; toggleswitch=1; whatsopen=whatmenu; return; } if (toggleswitch==1){ document.layers[whatmenu].visibility='hidden'; toggleswitch=0; whatsopen="none"; return; } } //End of Netscape code //================================================ //================================================ //now we can kill 2 birds with 1 stone Netscape 6.x and Mozilla if (moz) { if(toggleswitch == 0){ if(isform=="yes"){document.getElementById('formhide').style.visibility='hidden';} eval("document.getElementById('"+whatmenu+"').style.visibility = 'visible';"); toggleswitch=1; whatsopen=whatmenu; ;return;} if(toggleswitch == 1){ if(isform=="yes"){document.getElementById('formhide').style.visibility='visible';} eval("document.getElementById('"+whatmenu+"').style.visibility = 'hidden';");toggleswitch=0;whatsopen="none";return;} } } //End Netscape6 and Mozilla code //================================================ //################################################### //take us to where we want to go function goSub(where,what,tgt) { if(tgt==''){var wintgt="self";} else {var wintgt=tgt;} //close the menu then go to the link toggle2(what); if(tgt == ''){whereto= "location.href='"+where+"'";} if(tgt == 'new'){whereto= "window.open('"+where+"','"+tgt+"');";} if(tgt != 'new' && tgt != ''){whereto= "parent."+tgt+".location.href='"+where+"'";} setTimeout("eval(whereto)",550); } //End Function //################################################### //################################################### function getpositions(){ //================================================ //Get positions for ie Netscape6 Mozilla if (dom) { var menutop = document.getElementById('navbar').offsetTop; var menuleft = document.getElementById('navbar').offsetLeft; var menuheight = document.getElementById('navbar').offsetHeight; } //================================================ //================================================ //Get positions for Opera - opera cant seem to find the top pos if using tables? //operaload = once the first top positions is calculated then don't recalculate //this stops menus "bouncing" up and down if (opera) { docwidth = document.body.clientWidth; x1=buttonwidth/2; if(operaload==0 && menudir=="hor"){ operatop = event.y; operaload=1; } if(operaload!=0 && menudir=="hor"){ menutop=operatop; } winx = event.x; widtot = winx + x1; if (widtot > docwidth && menudir=="hor"){ var menuleft = winx - buttonwidth; } else { var menuleft = winx -x1; } if (menudir=="ver"){ menuleft = winx-navwidth[0]+10; menutop = event.y; } var menuheight = buttonheight; } //================================================ //================================================ //NS4x is a nightmare and requires a full tree to get the menu positions (more trouble than its worth) //So as NS4x is now an out of date browser all we do to keep the adapting of the script simple while still maintaining usability for NS4x users is position the open menus top left of the browser window not ideal but its better than ignoring those users all together. //You can script a message fo NS users politely telling them that they are using out of date software and suggect they should upgrade as NS4x won't be supported for much longer. if (Nav4) { } //End of Netscape Code //================================================ //================================================ //Reposition the menus to the correct position in IE Mozilla Opera Netscape6 if (dom || opera){ //small fix for NS6 if (window.innerWidth && !document.body.clientWidth){ docwidth = window.innerWidth; } else if (document.body.clientWidth){ docwidth = document.body.clientWidth; } if(menudir=="hor"){ menutop += menuheight+2; } if(menudir=="ver"){ menuleft += navwidth[0]+5; menutop += cellpad; //pad=0; } for(var i = 0 ; i <= howmanymenus ; i++){ if(menudir == "hor" && !opera){menuleft+=cellpad;} eval("document.getElementById('"+menunames[i]+"').style.left="+menuleft); eval("document.getElementById('"+menunames[i]+"').style.top="+menutop); if(menudir=="hor" && !opera){ tot=menuleft+navwidth[i]+buttonwidth; if( tot > docwidth ){ menuleft += navwidth[i]+navwidth[i+1]; menuleft -= buttonwidth; } else { menuleft += navwidth[i]+cellpad; if(NS6){menuleft += cellpad;} } } if(menudir=="ver" && !opera){ menutop += buttonheight+cellpad+cellpad; if(moz){menutop += cellpad;} } } //================================================ //End IE Mozilla Opera Netscape6 //################################################### } } function donewsitem(onoff){ newsonoff=onoff; if (window.innerWidth){ docwidth = window.innerWidth; docheight = window.innerHeight; } else { docwidth = document.body.clientWidth; docheight = document.body.clientHeight; } newsleft = docwidth-newswide; newsleft=newsleft/2; newstop = docheight-newshigh; newstop=newstop/2; timer=newstimer*1000; effectopenbak=effectopen; effectclosebak=effectclose; if(newsonoff != 1){return false;} toggleswitch = 1; if(msie || dom || opera){ effectopen=newseffect; effectclose=newseffect; document.getElementById("newsitem").style.left=newsleft; document.getElementById("newsitem").style.top=newstop; toggle2('newsitem'); } if (Nav4) { toggleswitch = 0; document['newsitem'].top=newstop; document['newsitem'].left=newsleft; } toggle2('newsitem'); setTimeout("toggle2('newsitem');newsonoff=0;effectopen=effectopenbak;effectclose=effectclosebak",timer); } function killMenu(whatwait){ if(timerID){clearTimeout(timerID)} timerID=setTimeout("toggle2('"+whatwait+"');",500); } function checkMenu(){ if(timerID){clearTimeout(timerID)} } //End of Script // Get updates and fixes @ http://www.andysstuff.co.uk //Please leave these comments intact