// JavaScript Document // // This JavaScript will center a hozional navbar on a page. // It does this by walking the UL/LI to find side the the bar and then adjust the left padding // to center the navbar. It should be called when the page is renedered and will adjust when a page is resized. // // IHN Tech Support Team. // 03/01/2010 - Version 1.0 // 03/08/2010 - Version 1.1 - Adjust for the UL size // // Globval Variables needed for the resize function. // Keep around for the resize to be quick. var NarBarDivElement; // This is the DIV Element to be centered. var ListElement; // This is the UL Element var NavBarLen; // Size of NavBar var NavBarPad; // Padding value var BodySize; // Last Body Size(for debug) var BodyWidth = 0; var DelayPage = 0; // Tools to return the page_Parms.. Tipical used for debug. // call function page_parms(event) { alert('BodySize: '+BodySize+' BodyWidth: '+BodyWidth+' Delay: '+DelayPage); alert('NavBarLen: '+NavBarLen+' NavBarPad: '+NavBarPad); return false; } // Initialize the Function, Calculate the Pad value // This function will find UL with LI's and calculate the left pad value required to center the UL. // The Navigation bar div element must have an ID that is passed on the call. // // This function needs to be called using the with the NavBar Div Element. // or at the end of the page being rendered. // // Example: onload="CenterNavBar(document.getElementById('navdiv'))"; // var Timer; function centerNavBar(NavBarDiv) { NarBarDivElement = NavBarDiv; // Set the Globval NavBar Div Element // Walk the Div node, looking for UL Element for (var i = 0; i < NarBarDivElement.childNodes.length; i++) { if (NarBarDivElement.childNodes[i].nodeType == 1) { if(NarBarDivElement.childNodes[i].tagName == "UL") { ListElement = NarBarDivElement.childNodes[i]; break; } } } if(!ListElement) { // Verify UL was found alert("Did not find the UL Element"); // Debug Code. return; // Did not find the UL Element } NavBarLen = 0; // Walk the all UL nodes and add up all the LI Element widths for (var i = 0; i < ListElement.childNodes.length; i++) { if (ListElement.childNodes[i].nodeType == 1 & // Element ListElement.childNodes[i].tagName == "LI") { // and LI Element NavBarLen += ListElement.childNodes[i].offsetWidth; } } // Use the PageResize to set the NavBar Div Element LeftPadOffset // Note, if document has not rendered yet(Page size is zero), give it time to do so. if(document.body.offsetWidth == 0) { setTimeout("PageResize()",0500); // 500 MS to let browser finish DelayPage = 99; // Set a flag to indicate delay used. } else { PageResize(); } // Set sthe resize event to run the PageResize function. // This is code will find the right method that works on all Browsers. if(window.addEventListener) { // Non-IE (DOM Level 2) window.addEventListener("resize", PageResize, false); } else if (window.attachEvent) { // IE (DOM Level 1) window.attachEvent("onresize", PageResize); } else { // Who knows, best guess. window.onResize() = PageResize; } } // // Page was resized. // Calculate the required pad and sets the Left Pad on the NavBarDiv function PageResize() { BodySize = document.body.offsetWidth; // Browser Page Size NavBarPad = (BodySize-NavBarLen)/2; // Set Left Pad offset if(NavBarPad < 5 ) { // Page size is to small, NavBar will wrap. NavBarPad = 5; // NavBarLen > Page size, use a default. } NarBarDivElement.style.paddingLeft = NavBarPad + "px"; }