// these variables and the 4 scripts that follow are used to hide/show the DIV layer var enableDropDowns = true; // globally enable/disable drop down menus var mainNavHideMenu = true; // our layer object is hidden by default, also via CSS if (enableDropDowns) { var mainNavIs = new mainNavIs(); } var mainNavHeight = 15; // vertical offset places menu under navigation element /////////// functions //////////////// function mainNavIs () { // checks for IE, which if true needs some space adjusting in the DIV var agt=navigator.userAgent.toLowerCase(); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); this.gecko = (agt.indexOf('ecko') != -1); this.firefox = (agt.indexOf('irefox') != -1); this.mac = (agt.indexOf("mac")!=-1); this.macppc = (this.mac && ((agt.indexOf("ppc")!=-1) || (agt.indexOf("powerpc")!=-1))); this.konq = (agt.indexOf('onqueror') != -1); this.linux = (agt.indexOf("inux")!=-1); } function mainNavSetLayer(clickTargetId,viz) { // obj: ID of object against which we do our relative positioning // lyr: our target DIV by ID // viz: what to do, hide or show // height: starting position for the DIV, usually the height of the target if (enableDropDowns) { var clickTarget = document.getElementById(clickTargetId); var menu = new mainNavGetObj(clickTargetId+'Menu'); if (clickTarget) { // we position the hidden DIV just under the clicked object var targetX = mainNavFindPosX(clickTarget); var targetY = mainNavFindPosY(clickTarget); //alert('x='+targetX+' y='+targetY); // IE has a different idea of the 0,0 origin location when the object is in a table // so this might break depending on if the target is in a table cell or not. if (mainNavIs.ie) { targetY += mainNavHeight - 1; } else if (mainNavIs.gecko && mainNavIs.mac && !mainNavIs.firefox) { targetY += mainNavHeight - 2; targetX += 0; } else if (mainNavIs.firefox) { targetY += mainNavHeight - 1; targetX += 0; } else if (mainNavIs.konq && mainNavIs.linux) { targetY += mainNavHeight - 1; targetX += 0; } else { targetY += mainNavHeight; } // now position the DIV according to our predictions // change targetX if you want to indent or overhang the DIV relative to target menu.style.top = targetY + 'px'; menu.style.left = targetX + 'px'; //alert('x='+targetX+' y='+targetY); } // now do something, according to 'viz' // 'toggle' does what it says :) if (viz=='toggle') mainNavHideMenu = !mainNavHideMenu; if (viz=='hidden') mainNavHideMenu = true; if (viz=='visible') mainNavHideMenu = false; menu.style.visibility = (mainNavHideMenu) ? 'hidden' : 'visible'; } } function mainNavFindPosX(obj) { // tricky bit to account for nested objects var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft; obj = obj.offsetParent; } } else if (obj.x) { curleft += obj.x; } return curleft; } function mainNavFindPosY(obj) { // tricky bit to account for nested objects var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; } } else if (obj.y) { curtop += obj.y; } return curtop; } function mainNavGetObj(name) { //alert(name); // get an object reference in accordance with the rules of engagement if (document.getElementById) { this.obj = document.getElementById(name); this.style = document.getElementById(name).style; } else if (document.all) { this.obj = document.all[name]; this.style = document.all[name].style; } else if (document.layers) { if (document.layers[name]) { this.obj = document.layers[name]; this.style = document.layers[name]; } } } /////////// drop-down menu defs //////////////// var menuTmp = ''; menuTmp += ''; menuTmp += ''; menuTmp += ''; menuTmp += ''; menuTmp += ''; menuTmp += ''; menuTmp += ''; // now write the entire blob to the container tmpObj = document.getElementById('menuDropdownContainer'); tmpObj.innerHTML = menuTmp;