// Navigator.js // JavaScript Document // ------------------------------------------------------------------------------------ // Set new browser and version. // ------------------------------------------------------------------------------------ var browser = new Browser(); // ------------------------------------------------------------------------------------ function Browser() { // ---------------------------------------------------------------------------- // Determine the browser and version. // ---------------------------------------------------------------------------- var i, sBrowser, sUserAgent; // ---------------------------------------------------------------------------- this.isIE = false; // Internet Explorer this.isOP = false; // Opera this.isNS = false; // Netscape this.version = null; // ---------------------------------------------------------------------------- sUserAgent = navigator.userAgent; // ---------------------------------------------------------------------------- // Browser is Opera. // ---------------------------------------------------------------------------- sBrowser = "Opera"; if ((i = sUserAgent.indexOf(sBrowser)) >= 0) { this.isOP = true; this.version = parseFloat(sUserAgent.substr(i + sBrowser.length)); return; } // ---------------------------------------------------------------------------- // Browser is Netscape. // ---------------------------------------------------------------------------- sBrowser = "Netscape"; if ((i = sUserAgent.indexOf(sBrowser)) >= 0) { this.isNS = true; this.version = parseFloat(sUserAgent.substr(i + sBrowser.length)); return; } // ---------------------------------------------------------------------------- // Treat any other "Gecko" browser as Netscape 6.1. // ---------------------------------------------------------------------------- sBrowser = "Gecko"; if ((i = sUserAgent.indexOf(sBrowser)) >= 0) { this.isNS = true; this.version = 6.1; return; } // ---------------------------------------------------------------------------- // Browser is MSIE. // ---------------------------------------------------------------------------- sBrowser = "MSIE"; if ((i = sUserAgent.indexOf(sBrowser))) { this.isIE = true; this.version = parseFloat(sUserAgent.substr(i + sBrowser.length)); return; } } // ------------------------------------------------------------------------------------ // Initialize active button. // ------------------------------------------------------------------------------------ var activeButton = null; // ------------------------------------------------------------------------------------ function buttonClick(event, menuId) { // ---------------------------------------------------------------------------- // Handle the menu bar and active button. // ---------------------------------------------------------------------------- var button; // ---------------------------------------------------------------------------- // Get the target button element. // ---------------------------------------------------------------------------- if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; // ---------------------------------------------------------------------------- // Blur focus from the link to remove outline. // ---------------------------------------------------------------------------- button.blur(); // ---------------------------------------------------------------------------- // Associate the named menu to this button, if not already done, and // initialize menu display. // ---------------------------------------------------------------------------- if (button.menu == null) { button.menu = document.getElementById(menuId); if (button.menu.isInitialized == null) menuInit(button.menu); } // ---------------------------------------------------------------------------- // Set to activate/deactivate on mouseover and set mouseout event handler // for the button, if not already done. // ---------------------------------------------------------------------------- if (button.onmouseout == null) button.onmouseout = buttonOrMenuMouseout; // ---------------------------------------------------------------------------- // Exit, if this button is currently the active one. // ---------------------------------------------------------------------------- if (button == activeButton) return false; // ---------------------------------------------------------------------------- // Reset the currently active button, if any. // ---------------------------------------------------------------------------- if (activeButton != null) resetButton(activeButton); // ---------------------------------------------------------------------------- // Activate this button, unless it was currently the active one. // ---------------------------------------------------------------------------- if (button != activeButton) { depressButton(button); activeButton = button; } else activeButton = null; return false; } // ------------------------------------------------------------------------------------ function buttonMouseover(event, menuId) { // ---------------------------------------------------------------------------- // Set to activate/deactivate on mouseover. // ---------------------------------------------------------------------------- var button; // ---------------------------------------------------------------------------- // Activates this button's menu if no other is currently active. // ---------------------------------------------------------------------------- if (activeButton == null) { buttonClick(event, menuId); return; } // ---------------------------------------------------------------------------- // Find the target button element. // ---------------------------------------------------------------------------- if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; // ---------------------------------------------------------------------------- // If any other button menu is active, make this one active instead. // ---------------------------------------------------------------------------- if (activeButton != null && activeButton != button) buttonClick(event, menuId); } // ------------------------------------------------------------------------------------ function depressButton(button) { // ---------------------------------------------------------------------------- var x, y; // ---------------------------------------------------------------------------- // Update the button's style class to make it look like it is depressed. // ---------------------------------------------------------------------------- button.className += " menuButtonActive"; // ---------------------------------------------------------------------------- // Set to activate/deactivate on mouseover amd set mouseout event handler // for the button, if not already done. // ---------------------------------------------------------------------------- if (button.onmouseout == null) button.onmouseout = buttonOrMenuMouseout; if (button.menu.onmouseout == null) button.menu.onmouseout = buttonOrMenuMouseout; // ---------------------------------------------------------------------------- // Position the associated drop down menu under the button and show it. // ---------------------------------------------------------------------------- x = getPageOffsetLeft(button); y = getPageOffsetTop(button) + button.offsetHeight; // ---------------------------------------------------------------------------- // For IE, adjust position. // ---------------------------------------------------------------------------- if (browser.isIE) { x += button.offsetParent.clientLeft; y += button.offsetParent.clientTop; } button.menu.style.left = x + "px"; button.menu.style.top = y + "px"; button.menu.style.visibility = "visible"; } // ------------------------------------------------------------------------------------ function resetButton(button) { // ---------------------------------------------------------------------------- // Restore the button's style class. // ---------------------------------------------------------------------------- removeClassName(button, "menuButtonActive"); // ---------------------------------------------------------------------------- // Hide the button's menu, first closing any sub menus. // ---------------------------------------------------------------------------- if (button.menu != null) { closeSubMenu(button.menu); button.menu.style.visibility = "hidden"; } } // ------------------------------------------------------------------------------------ // Handle the menus and sub menus. // ------------------------------------------------------------------------------------ function menuMouseover(event) { // ---------------------------------------------------------------------------- var menu; // ---------------------------------------------------------------------------- // Find the target menu element. if (browser.isIE) menu = getContainerWith(window.event.srcElement, "DIV", "menu"); else menu = event.currentTarget; // ---------------------------------------------------------------------------- // Close any active sub menu. // ---------------------------------------------------------------------------- if (menu.activeItem != null) closeSubMenu(menu); } // ------------------------------------------------------------------------------------ function menuItemMouseover(event, menuId) { // ---------------------------------------------------------------------------- var item, menu, x, y; // ---------------------------------------------------------------------------- // Find the target item element and its parent menu element. // ---------------------------------------------------------------------------- if (browser.isIE) item = getContainerWith(window.event.srcElement, "A", "menuItem"); else item = event.currentTarget; menu = getContainerWith(item, "DIV", "menu"); // ---------------------------------------------------------------------------- // Close any active sub menu and mark this one as active. // ---------------------------------------------------------------------------- if (menu.activeItem != null) closeSubMenu(menu); menu.activeItem = item; // ---------------------------------------------------------------------------- // Highlight the item element. // ---------------------------------------------------------------------------- item.className += " menuItemHighlight"; // ---------------------------------------------------------------------------- // Initialize the sub menu, if not already done. // ---------------------------------------------------------------------------- if (item.subMenu == null) { item.subMenu = document.getElementById(menuId); if (item.subMenu.isInitialized == null) menuInit(item.subMenu); } // ---------------------------------------------------------------------------- // Set to activate/deactivate on mouseover and set mouseout event handler // for the sub menu, if not already done. // ---------------------------------------------------------------------------- if (item.subMenu.onmouseout == null) item.subMenu.onmouseout = buttonOrMenuMouseout; // ---------------------------------------------------------------------------- // Get position for submenu based on the menu item. // ---------------------------------------------------------------------------- x = getPageOffsetLeft(item) + item.offsetWidth; y = getPageOffsetTop(item); // ---------------------------------------------------------------------------- // Adjust position to fit in view. // ---------------------------------------------------------------------------- var maxX, maxY; if (browser.isIE) { maxX = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) + (document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth : document.body.clientWidth); maxY = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight); } if (browser.isOP) { maxX = document.documentElement.scrollLeft + window.innerWidth; maxY = document.documentElement.scrollTop + window.innerHeight; } if (browser.isNS) { maxX = window.scrollX + window.innerWidth ; maxY = window.scrollY + window.innerHeight; } maxX -= item.subMenu.offsetWidth; maxY -= item.subMenu.offsetHeight; if (x > maxX) x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth + (menu.offsetWidth - item.offsetWidth)); y = Math.max(0, Math.min(y, maxY)); // ---------------------------------------------------------------------------- // Position and show the sub menu. // ---------------------------------------------------------------------------- item.subMenu.style.left = x + "px"; item.subMenu.style.top = y + "px"; item.subMenu.style.visibility = "visible"; // ---------------------------------------------------------------------------- // Stop the event from bubbling. // ---------------------------------------------------------------------------- if (browser.isIE) window.event.cancelBubble = true; else event.stopPropagation(); } // ------------------------------------------------------------------------------------ function closeSubMenu(menu) { // ---------------------------------------------------------------------------- if (menu == null || menu.activeItem == null) return; // ---------------------------------------------------------------------------- // Recursively close any sub menus. // ---------------------------------------------------------------------------- if (menu.activeItem.subMenu != null) { closeSubMenu(menu.activeItem.subMenu); menu.activeItem.subMenu.style.visibility = "hidden"; menu.activeItem.subMenu = null; } removeClassName(menu.activeItem, "menuItemHighlight"); menu.activeItem = null; } // ------------------------------------------------------------------------------------ // Set to activate/deactivate on mouseover. Handler for mouseout event on // buttons and menus. // ------------------------------------------------------------------------------------ function buttonOrMenuMouseout(event) { // ---------------------------------------------------------------------------- var element; // ---------------------------------------------------------------------------- // Exit, if there is no active button. // ---------------------------------------------------------------------------- if (activeButton == null) return; // ---------------------------------------------------------------------------- // Find the element the mouse is moving to. // ---------------------------------------------------------------------------- if (browser.isIE) element = window.event.toElement; else if (event.relatedTarget != null) element = (event.relatedTarget.tagName ? event.relatedTarget : event.relatedTarget.parentNode); // ---------------------------------------------------------------------------- // Reset the active button, if the element is not part of a menu. // ---------------------------------------------------------------------------- if (getContainerWith(element, "DIV", "menu") == null) { resetButton(activeButton); activeButton = null; } } // ------------------------------------------------------------------------------------ // Initialize menus. // ------------------------------------------------------------------------------------ function menuInit(menu) { // ---------------------------------------------------------------------------- var itemList, spanList; var textEl, arrowEl; var itemWidth; var w, dw; var i, j; // ---------------------------------------------------------------------------- // For IE, replace arrow characters. // ---------------------------------------------------------------------------- if (browser.isIE) { menu.style.lineHeight = "2.5ex"; spanList = menu.getElementsByTagName("SPAN"); for (i = 0; i < spanList.length; i++) if (hasClassName(spanList[i], "menuItemArrow")) { spanList[i].style.fontFamily = "Webdings"; spanList[i].firstChild.nodeValue = "4"; } } // ---------------------------------------------------------------------------- // Find the width of a menu item. // ---------------------------------------------------------------------------- itemList = menu.getElementsByTagName("A"); if (itemList.length > 0) itemWidth = itemList[0].offsetWidth; else return; // ---------------------------------------------------------------------------- // For items with arrows, add padding to item text to make the arrows // flush right. // ---------------------------------------------------------------------------- for (i = 0; i < itemList.length; i++) { spanList = itemList[i].getElementsByTagName("SPAN"); textEl = null; arrowEl = null; for (j = 0; j < spanList.length; j++) { if (hasClassName(spanList[j], "menuItemText")) textEl = spanList[j]; if (hasClassName(spanList[j], "menuItemArrow")) arrowEl = spanList[j]; } if (textEl != null && arrowEl != null) { textEl.style.paddingRight = (itemWidth - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px"; // For Opera, remove the negative right margin to fix a display bug. if (browser.isOP) arrowEl.style.marginRight = "0px"; } } // ---------------------------------------------------------------------------- // Fix IE hover problem by setting an explicit width on first item of the menu. // ---------------------------------------------------------------------------- if (browser.isIE) { w = itemList[0].offsetWidth; itemList[0].style.width = w + "px"; dw = itemList[0].offsetWidth - w; w -= dw; itemList[0].style.width = w + "px"; } // ---------------------------------------------------------------------------- // Mark menu as initialized. // ---------------------------------------------------------------------------- menu.isInitialized = true; } // ------------------------------------------------------------------------------------ // General utility functions. // ------------------------------------------------------------------------------------ function getContainerWith(node, tagName, className) { // ---------------------------------------------------------------------------- // Starting with the given node, find the nearest containing element with // the specified tag name and style class. // ---------------------------------------------------------------------------- while (node != null) { if (node.tagName != null && node.tagName == tagName && hasClassName(node, className)) return node; node = node.parentNode; } return node; } // ------------------------------------------------------------------------------------ function hasClassName(element, name) { // ---------------------------------------------------------------------------- var i, list; // ---------------------------------------------------------------------------- // Return true if the given element currently has the given class name. // ---------------------------------------------------------------------------- list = element.className.split(" "); for (i = 0; i < list.length; i++) if (list[i] == name) return true; return false; } // ------------------------------------------------------------------------------------ function removeClassName(element, name) { // ---------------------------------------------------------------------------- var i, curList, newList; // ---------------------------------------------------------------------------- if (element.className == null) return; // ---------------------------------------------------------------------------- // Remove the given class name from the element's className property. // ---------------------------------------------------------------------------- newList = new Array(); curList = element.className.split(" "); for (i = 0; i < curList.length; i++) if (curList[i] != name) newList.push(curList[i]); element.className = newList.join(" "); } // ------------------------------------------------------------------------------------ function getPageOffsetLeft(element) { // ---------------------------------------------------------------------------- var x; // ---------------------------------------------------------------------------- // Return the x coordinate of an element relative to the page. // ---------------------------------------------------------------------------- x = element.offsetLeft; if (element.offsetParent != null) x += getPageOffsetLeft(element.offsetParent); return x; } // ------------------------------------------------------------------------------------ function getPageOffsetTop(element) { // ---------------------------------------------------------------------------- var y; // ---------------------------------------------------------------------------- // Return the y coordinate of an element relative to the page. // ---------------------------------------------------------------------------- y = element.offsetTop; if (element.offsetParent != null) y += getPageOffsetTop(element.offsetParent); return y; }