/* ------------- drop down menu script Durdin ------------ modified 22 September 2009 --------- */ // copyright Graf Web Design - Australia 2006 All rights reserved // // global variables var g_currentMOhandler=null; // stores button mouseover handler var g_currentMenu=null; // stores menu that is currently open var g_currentButton=null; // stores button that has just activated the menu var g_bkgrndElem=null; // stores ref to background object var g_oldBgColor=null; // stores ref to button backgrnd colour on mouseover var g_oldFgColor=null; // stores ref to button foreground colour on mouseover var g_boxList=new Array() // stores display [block] or not[none] info for each box g_boxList["box1"]="none"; g_boxList["box2"]="none"; g_boxList["box3"]="block"; g_boxList["box4"]="none"; g_boxList["box5"]="none"; g_boxList["box6"]="none"; // // nav bar colours var bgS={r:"FE",g:"D6",b:"6C"} // background static hex var bgH={r:"FE",g:"CB",b:"43"} // background hover hex var fgS={r:"00",g:"00",b:"00"} // foreground static hex var fgH={r:"00",g:"00",b:"FF"} // foreground hover hex // ------------------------------------------------- // initialise button handlers on loading the page [look in the tag below for the call to this function]. function init() { var i, elem; // apply event handler to each button for(i=1; i<7; i++) // <<<<<<<<<<<<< change this number to increase number of menus [buttons+1]. { elem=document.getElementById("ox"+i); elem.onmouseover=show; // passes event to function show() when written like this elem.style.backgroundColor=("#"+bgS.r+bgS.g+bgS.b); // sets background colour elem.style.color=("#"+fgS.r+fgS.g+fgS.b); // sets foreground colour } } // // -------- Colour settings: ------------------------ // topNav bar bkgrd colour set above. topNav hover colour and toggle set below. // Drop-down boxes background and table td cells set in ddMenu.css // Drop down box table toggle set in nav.js // ---------------------------------------------- // When you hover over the nav button the mouseover handler on the button calls the // function "show()". The event is passed to the function, which allows you to // determine the object that called the event - which button in this case. // The button id's are named "ox1" and "ox2". By adding a "b"+"ox1" you get "box1" // which is the id of the menu. This allows you to make the correct menu visible. // You can add any number of menus by adding another

below // and increasing the number in the init() function. // function show(evt) { // -- check for outstanding menu being displayed -- if(g_currentMenu){ swch()}; // if it's there, clear it and cancel all storage by calling function swch() // // --- equalise events across IE and NS. evt is passed to this function by the mouseover event --- evt=(evt)?evt : ((window.event)?event : null) g_currentButton=(evt.target)? evt.target : evt.srcElement; // this is the button being hovered over // ------- correction for bug in Netscape 7 ---- text node is selected. Swap between node and parent node, depending on browser g_currentButton=(g_currentButton.parentNode.nodeName=="TD")?g_currentButton.parentNode : g_currentButton; // // raise dd menu background above other elements document.getElementById("bkgrnd").style.zIndex=20; // --- toggle button colour background on hover ---- g_oldBgColor=g_currentButton.style.backgroundColor.toUpperCase(); // store old navTop background colour UPPER CASE g_oldFgColor=g_currentButton.style.color.toUpperCase(); // store old foreground colour // // nav bar static and hover colours // /* --------------------------------------------------------------------------------------------- // ======= modified 18 November 2007 ========== // set nav bar static and hover colours here - first colour is light colour var newBgColor, fill=""; // global // ----- check for RGB colours - FireFox, Netscape system --- // Netscape and Firefox use RGB(255, 255,255) system one has spaces, the other doesn't if(g_oldBgColor.indexOf("(")>-1) // Netscape + FireFox { fill=(g_oldBgColor.indexOf(" ")== -1)?"" :" "; // look for spaces newBgColor=(g_oldBgColor=="RGB(254,"+fill+"214,"+fill+"108)")?"RGB(254,"+fill+"203,"+fill+"67)" : "RGB(254,"+fill+"214,"+fill+"108)"; } else // IE + Opera { var newBgColor=(g_oldBgColor=="#FED66C")?"#FECB43" : "#FED66C"; } // --------------------------------------------------------------------------------------------------- */ var newBgColor, newFgColor, fill=""; // ----- check for RGB colours - FireFox, Netscape system --- // Netscape and Firefox use rgb(255,255,255) system one has spaces, the other doesn't if(g_oldBgColor.indexOf("(")>-1) // Netscape + FireFox { fill=(g_oldBgColor.indexOf(" ")== -1)?"" :" "; // look for spaces // // use function D(hex) to convert hex to decimal (below) newBgColor=(g_oldBgColor=="rgb("+D(bgH.r)+","+fill+D(bgH.g)+","+fill+D(bgH.b)+")")?"rgb("+D(bgS.r)+","+fill+D(bgS.g)+","+fill+D(bgS.b)+")" : "rgb("+D(bgH.r)+","+fill+D(bgH.g)+","+fill+D(bgH.b)+")"; // newFgColor=(g_oldFgColor=="rgb("+D(fgH.r)+","+fill+D(fgH.g)+","+fill+D(fgH.b)+")")?"rgb("+D(fgS.r)+","+fill+D(fgS.g)+","+fill+D(fgS.b)+")" : "rgb("+D(fgH.r)+","+fill+D(fgH.g)+","+fill+D(fgH.b)+")"; } else // IE + Opera { newBgColor=(g_oldBgColor.toUpperCase()==("#"+bgH.r+bgH.g+bgH.b))?("#"+bgS.r+bgS.g+bgS.b) : ("#"+bgH.r+bgH.g+bgH.b); newFgColor=(g_oldFgColor.toUpperCase()==("#"+fgH.r+fgH.g+fgH.b))?("#"+fgS.r+fgS.g+fgS.b) : ("#"+fgH.r+fgH.g+fgH.b); } // // set button to new background colour g_currentButton.style.backgroundColor=newBgColor; g_currentButton.style.color=newFgColor; // // get menu object and store as global current menu g_currentMenu=document.getElementById("b"+g_currentButton.id); // get reference to menu object eg: "b"+"ox1" // check if you want to display then display menu if allowed var showIt=g_boxList[g_currentMenu.id]; // g_currentMenu.style.display=showIt; // store current handler for later in global variable g_currentMOhandler=g_currentButton.onmouseover; // set the button MO handler to do nothing g_currentButton.onmouseover=null; // // set global background handler to active g_bkgrndElem=document.getElementById("bkgrnd"); // get reference to background object g_bkgrndElem.onmouseover=swch; // apply event handler // // set thumbnail picBox z-index to 1: ie: under bkgrnd if it exists var elem2=document.getElementById("picBox"); if(elem2){elem2.style.zIndex="1"}; // // set selectList on recipe page display to none if it exists to avoid conflict with dd menu var elem2=document.getElementById("selectList"); if(elem2){elem2.style.display="none"}; // return true } // // -------------------------------------------- // convert hex to decimal pairs function D(hexNo) { var hexPair=parseInt(hexNo,16); return hexPair; } // -------------------------------------------- // // this function hides outstanding menus and clears all storage info // function swch() { // hide current menu g_currentMenu.style.display="none"; g_currentMenu=null; // // cancel background handler g_bkgrndElem.onmouseover=null; // set to do nothing // reset z-index of background to zero document.getElementById("bkgrnd").style.zIndex=0; // // toggle button colour g_currentButton.style.backgroundColor=g_oldBgColor; g_oldBgColour=null; // toggle button foreground colour g_currentButton.style.color=g_oldFgColor; g_oldFgColour=null; // // reset old button handler and cancel entries g_currentButton.onmouseover=g_currentMOhandler; g_currentButton=null; g_currentMOhandler=null; // // reset thumbnail z-index to 10 if it exists var elem2=document.getElementById("picBox") if(elem2){elem2.style.zIndex="10"}; // reset selectList on recipe page display to block if it exists var elem2=document.getElementById("selectList") if(elem2){elem2.style.display="block"}; } // ---------------------------------------------- // page to go to function pg(destn) { location.href=destn; return false; } // --------------- // toggle dd box menu background colour function tog(obj,numb) { var bgCol=(numb==1)?"#FFF" :"#FFF16B"; obj.style.backgroundColor=bgCol; } // ----------