/** * Menu 990702 * by gary smith, July 1997 * Copyright (c) 1997-1999 Netscape Communications Corp. * * Netscape grants you a royalty free license to use or modify this * software provided that this copyright notice appears on all copies. * This software is provided "AS IS," without a warranty of any kind. * *Changes made by Mark Collins and Bob Martinka - EDS *01 - Mouseover functionality in IE on Images was using the Menu Container Number [x] instead of the * Menu Item Number [i]. Changed Mouseover and Mouseout to reflect [i] instead of [x]. *02 - original line - function showMenu(menu, x, y, child) * changed on 8/5/2001 by Mark Collins - added offsetname for the elementreference of the element * you want to position the submenu from to the left. offsetvalue is the number of pixels to display the top * left corner of the submenu from the element reference. pass the x,y value as 'offset' * changed where x and y are being tested for "relative" to handle the new x,y values * * added functions GetRealTop and GetRealLeft to retrieve x,y coordinates of element reference *03 - Changed the default sub menu width to 200. *04 - Added 6 new parms (bgColor, ... , menuHiliteBgColor) to Menu() function to allow more flexibility * in the formatting of the menus, and to further allow for a single copy of this menu code. *05 - 02/11/02 (Martinka) Added a z-index of 10 to the menu container DIVs in WriteMenus so that we can further ensure that the submenus * will be able to "float" over all other elements on the page *06 - 02/11/02 (Martinka) Added additional parm to Menu function call to allow flexible menu item height *07 - 03/10/03 (Martinka) Added additional parm to Menu function call to allow flexible menu item width; this nullifies change #3 above **/ /*************************/ function Menu(label,bgColor,menuBorder,menuItemBgColor,menuLiteBgColor,menuBorderBgColor,menuHiliteBgColor,imgOver,menuItemHeight,menuItemWidth) { this.version = "990702 [Menu; menu.js]"; this.type = "Menu"; this.fontSize = 12; this.fontWeight = "bold"; this.fontFamily = "arial,helvetica,espy,sans-serif"; this.fontColor = "#000000"; this.fontColorHilite = "#ffffff"; this.bgColor = bgColor; this.menuBorder = menuBorder; this.menuItemBorder = 0; this.menuItemBgColor = menuItemBgColor; this.menuLiteBgColor = menuLiteBgColor; this.menuBorderBgColor = menuBorderBgColor; this.menuHiliteBgColor = menuHiliteBgColor; this.menuContainerBgColor = "#cccccc"; this.menuItemHeight = menuItemHeight; this.menuItemWidth = menuItemWidth; this.items = new Array(); this.actions = new Array(); this.colors = new Array(); this.mouseovers = new Array(); this.mouseouts = new Array(); this.addMenuItem = addMenuItem; this.writeMenus = writeMenus; this.showMenu = showMenu; this.onMenuItemOver = onMenuItemOver; this.onMenuItemOut = onMenuItemOut; this.onMenuItemAction = onMenuItemAction; this.onMenuOver = imgOver; this.hideMenu = hideMenu; this.hideActiveMenus = hideActiveMenus; this.keepHilite = keepHilite; this.mouseTracker = mouseTracker; this.setMouseTracker = setMouseTracker; if (!window.menus) window.menus = new Array(); this.label = label || "menuLabel" + window.menus.length; window.menus[this.label] = this; window.menus[window.menus.length] = this; if (!window.activeMenus) window.activeMenus = new Array(); if (!window.menuContainers) window.menuContainers = new Array(); this.setMouseTracker(); if (window.MenuAPI) MenuAPI(this); } /*************************/ function addMenuItem(label, action, color, mouseover, mouseout) { this.items[this.items.length] = label; this.actions[this.actions.length] = action; this.colors[this.colors.length] = color; this.mouseovers[this.mouseovers.length] = mouseover; this.mouseouts[this.mouseouts.length] = mouseout; } /*************************/ function writeMenus(container) { if (!container && document.layers) { if (eval("document.width")) container = new Layer(1000); } else if (!container && document.all) { if (!document.all["menuContainer"]) document.writeln(''); container = document.all["menuContainer"]; } if (!container && !window.delayWriteMenus) { window.delayWriteMenus = this.writeMenus; window.menuContainerBgColor = this.menuContainerBgColor; setTimeout('delayWriteMenus()', 3000); return; } container.isContainer = "menuContainer" + menuContainers.length; menuContainers[menuContainers.length] = container; container.menus = new Array(); for (var i=0; i\n'+ /*05*/ ' \n\n'; i=x; } if (!container) return; if (container.innerHTML) { container.innerHTML=content; } else { container.document.open("text/html"); container.document.writeln(content); container.document.close(); } proto = null; if (container.document.layers) { container.clip.width = window.innerWidth; container.clip.height = window.innerHeight; //! container.onmouseout = this.hideMenu; container.onmouseout = this.hideActiveMenus; //! container.onmouseover = this.keepHilite; container.menuContainerBgColor = this.menuContainerBgColor; for (var i=0; i0) l.top = body.document.layers[n-1].top + body.document.layers[n-1].clip.height + proto.menuItemBorder; l.hilite = l.document.layers[1]; l.document.layers[1].isHilite = true; if (l.document.layers[0].id.indexOf("menuSeparator") != -1) { l.hilite = null; l.clip.height -= l.clip.height / 2; l.document.layers[0].document.bgColor = proto.bgColor; l.document.layers[0].clip.width = l.clip.width -2; l.document.layers[0].clip.height = 1; l.document.layers[1].document.bgColor = proto.menuLiteBgColor; l.document.layers[1].clip.width = l.clip.width -2; l.document.layers[1].clip.height = 1; l.document.layers[1].top = l.document.layers[0].top + 1; } else if (l.document.layers.length > 2) { l.document.layers[2].left = l.clip.width -13; l.document.layers[2].top = (l.clip.height / 2) -4; l.document.layers[2].clip.left += 3; } } body.document.bgColor = proto.bgColor; body.clip.width = l.clip.width +1; body.clip.height = l.top + l.clip.height +1; body.document.layers[n].clip.width = body.clip.width; body.document.layers[n].onmouseout = proto.onMenuItemOut; body.document.layers[n].Menu = l.Menu; body.document.layers[n].top = -30; menu.document.bgColor = proto.menuBorderBgColor; menu.document.layers[0].document.bgColor = proto.menuLiteBgColor; menu.document.layers[0].clip.width = body.clip.width +1; menu.document.layers[0].clip.height = body.clip.height +1; menu.clip.width = body.clip.width + (proto.menuBorder * 2) +1; menu.clip.height = body.clip.height + (proto.menuBorder * 2) +1; } } else if (container.document.all) { var menuCount = 0; for (var x=0; x0) l.style.pixelTop = container.document.all["menuItem" + (menuCount -1)].style.pixelTop + container.document.all["menuItem" + (menuCount -1)].style.pixelHeight + proto.menuItemBorder; l.style.fontSize = proto.fontSize; l.style.backgroundColor = proto.menuItemBgColor; l.style.visibility = "inherit"; l.saveColor = proto.menuItemBgColor; l.menuHiliteBgColor = proto.menuHiliteBgColor; l.action = container.menus[x].actions[i]; l.hilite = container.document.all["menuItemHilite" + menuCount]; l.focusItem = container.document.all["focusItem" + x]; l.focusItem.style.pixelTop = -30; /*01*/ l.mouseover = l.Menu.mouseovers[i]; /*01*/ l.mouseout = l.Menu.mouseouts[i]; menuCount++; } proto.menuHeight = (l.style.pixelTop + l.style.pixelHeight); var lite = container.document.all["menuLite" + x]; lite.style.pixelHeight = proto.menuHeight +2; lite.style.pixelWidth = proto.menuItemWidth + 2; lite.style.backgroundColor = proto.menuLiteBgColor; var body = container.document.all["menuFg" + x]; body.style.pixelHeight = proto.menuHeight + 1; body.style.pixelWidth = proto.menuItemWidth + 1; body.style.backgroundColor = proto.bgColor; container.menus[x].menuLayer.style.pixelWidth = proto.menuWidth || proto.menuItemWidth + (proto.menuBorder * 2) +2; container.menus[x].menuLayer.style.pixelHeight = proto.menuHeight + (proto.menuBorder * 2) +2; } container.document.all("menuContainer").style.backgroundColor = container.menus[0].menuContainerBgColor; container.document.saveBgColor = container.document.bgColor; } window.wroteMenu = true; } /*************************/ function keepHilite(e) { var l = e || window.ActiveMenu; if (!l) return true; // the capturing and substringing of the menu name here ASSUMES that the menu name ends in "menu", // which is stripped off in order to determine the name to use for swapping of the image var strMenu = l.label; var strMenu = strMenu.slice(0, -4); if (document.layers) { } else { MM_swapImage(strMenu, '', l.onMenuOver, 1); } return true; } /*************************/ function onMenuItemOver(e, l, a) { l = l || this; a = a || window.ActiveMenuItem; if (document.layers) { if (a) { a.document.bgColor = a.saveColor; if (a.hilite) a.hilite.visibility = "hidden"; } else { a = new Object(); } if (this.mouseover && this.id != a.id) { if (this.mouseover.length > 4) { var ext = this.mouseover.substring(this.mouseover.length-4); if (ext == ".gif" || ext == ".jpg") { this.document.layers[1].document.images[0].src = this.mouseover; } else { eval("" + this.mouseover); } } } if (l.hilite) { l.document.bgColor = l.menuHiliteBgColor; l.zIndex = 1; l.hilite.visibility = "inherit"; l.hilite.zIndex = 2; l.document.layers[1].zIndex = 1; l.focusItem.zIndex = this.zIndex +2; } l.focusItem.top = this.top; } else if (l.style && l.Menu) { if (a) { a.style.backgroundColor = a.saveColor; if (a.hilite) a.hilite.style.visibility = "hidden"; } else { a = new Object(); } if (l.mouseover && l.id != a.id) { if (l.mouseover.length > 4) { var ext = l.mouseover.substring(l.mouseover.length-4); if (ext == ".gif" || ext == ".jpg") { l.document.images[l.id + "Img"].src = l.mouseover; } else { eval("" + l.mouseover); } } } l.style.backgroundColor = l.menuHiliteBgColor; if (l.hilite) { l.style.backgroundColor = l.menuHiliteBgColor; l.hilite.style.visibility = "inherit"; } l.focusItem.style.pixelTop = l.style.pixelTop; l.focusItem.style.zIndex = l.zIndex +1; l.zIndex = 1; } window.ActiveMenuItem = l; } /*************************/ function onMenuItemOut(e, l, a) { l = l || this; a = a || window.ActiveMenuItem; if (l.id.indexOf("focusItem")) { if (a && l.top) { l.top = -30; if (a.mouseout && a.id != l.id) { if (a.mouseout.length > 4) { var ext = a.mouseout.substring(a.mouseout.length-4); if (ext == ".gif" || ext == ".jpg") { a.document.layers[1].document.images[0].src = a.mouseout; } else { eval("" + a.mouseout); } } } } else if (a && l.style) { window.event.cancelBubble=true; if (l.mouseout) { if (l.mouseout.length > 4) { var ext = l.mouseout.substring(l.mouseout.length-4); if (ext == ".gif" || ext == ".jpg") { l.document.images[l.id + "Img"].src = l.mouseout; } else { eval("" + l.mouseout); } } } } } } /*************************/ function onMenuItemAction(e, l) { l = window.ActiveMenuItem; if (!l) return; if (!ActiveMenu.Menu.disableHide) hideActiveMenus(ActiveMenu.menuLayer); if (l.action) { eval("" + l.action); } } /*************************/ function showMenu(menu, x, y,offname,offxvalue,offyvalue,child) //02 (added parms) { if (!window.wroteMenu) // if menu has already been written, then { return // ... return to calling routine } if (document.layers) // browser sniff: if Netscape DOM, then process menu this way: { if (menu) // if menu sent in as a parm (menu) exists, then { var l = menu.menuLayer || menu; // ... 1) save ref to menu layer object (or to menu if no layer) if (typeof(menu) == "string") // 2) if menu parm is a string, then { for (var n=0; n < menuContainers.length; n++) // ... process each submenu as follows: { l = menuContainers[n].menus[menu]; // save ref to desired menu object contained by current loop for (var i=0; i < menuContainers[n].menus.length; i++) // process each sub-submenu as follows: { if (menu == menuContainers[n].menus[i].label) // if menu parm is same as menu object in loop, then { l = menuContainers[n].menus[i].menuLayer // ... save ref to desired menu object } if (l) // if menu found, then { break // ... exit inner (i) FOR loop } } // complete inner (i) FOR loop processing } // complete outer (n) FOR loop processing if (!l) // if no menu object has been found, then { return // ... return to calling routine } } l.Menu.container.document.bgColor = null; // 3) set menu container background color to null l.left = 1; // 4) set menu x-coord l.top = 1; // 5) set menu y-coord hideActiveMenus(l); // 6) hide all active menus if (this.visibility) // 7) if this menu is visible, then { l = this // ... set ref to current menu } window.ActiveMenu = l; // 8) make current menu the active menu window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); // 9) ??? setTimeout('if(window.ActiveMenu)window.ActiveMenu.Menu.setMouseTracker();', 300); // 10) ??? } else // else if the menu sent in as a parm (menu) does NOT exist, then { var l = child // ... save the ref to the object sent in as the "child" parm (via recursive call) } if (!l) // if there still has been no menu object reference saved, then { return // ... return to the calling routine } for (var i=0; i < l.layers.length; i++) // process each layer in the menu object as follows: { if (!l.layers[i].isHilite) // if the layer in the current loop is NOT highlighted, then { l.layers[i].visibility = "inherit" // ... set layer visibility to that of its parent ??? } if (l.layers[i].document.layers.length > 0) // if layer in curr loop has its own document w/ layers, then { showMenu(null, "relative", "relative", null,null,null,l.layers[i]) // ... make recursive call to this function (added 02) } // w/ "child" parm being current loop layer } // complete FOR loop (i) procsesing if (l.parentLayer) // if the menu object has a parent layer, then { if (x != "relative") // ... 1) if x-coord type parm (x) is NOT "relative", then { // it will generally be a numeric value, so // if (x == "offset") //02 (removed entire IF statement) // { // var MyLeftX = getRealLeft(body.document.layers[offname]); // x = MyLeftX - offxvalue; // } l.parentLayer.left = x || window.pageX || 0 // ... set the x-coord of the parent layer to the parm (x) } // (or to window's x-coord if no x parm, or to 0) if (l.parentLayer.left+l.clip.width > window.innerWidth) // 2) if right-side of menu is more than width of window, then { l.parentLayer.left -= (l.parentLayer.left + l.clip.width - window.innerWidth); // ... move parent layer to the left } if (y != "relative") // 3) if y-coord type parm (y) is NOT "relative", then { // it will generally be a numeric value, so // if (y == "offset") //02 (removed entire IF statement) // { // var MyLeftY = getRealTop(body.document.layers[offname]); // y = MyLeftY + offyvalue; // } l.parentLayer.top = y || window.pageY || 0 // ... set the y-coord of the parent layer to the parm (y) } // (or to window's y-coord if no y parm, or to 0) if (l.parentLayer.isContainer) // 4) if the parent layer is a menu container, then { l.Menu.xOffset = window.pageXOffset; // ... 1) set menu x-coord l.Menu.yOffset = window.pageYOffset; // 2) set menu y-coord l.parentLayer.clip.width = window.ActiveMenu.clip.width +2; // 3) set parent layer width to menu width + 2pixels l.parentLayer.clip.height = window.ActiveMenu.clip.height +2; // 4) set parent layer height to menu height + 2pixels if (l.parentLayer.menuContainerBgColor) // 5) if menu container bkground color exists, then { l.parentLayer.document.bgColor = l.parentLayer.menuContainerBgColor // ... set parent layer bkground color } } } l.visibility = "inherit"; // set visibility of menu object to that of its parent if (l.Menu) // if menu container exists, then { l.Menu.container.visibility = "inherit" // ... set visibility of menu container to that of its parent } } else if (document.all) // browser sniff: else if IE DOM, then process menu this way: { var l = menu.menuLayer || menu; // save ref to menu layer object (or to menu if no layer) hideActiveMenus(l); // hide all active menus if (typeof(menu) == "string") // if menu parm is a string, then { l = document.all[menu]; // ... save ref to the menu object for (var n=0; n < menuContainers.length; n++) // process each submenu as follows: { l = menuContainers[n].menus[menu]; // save ref to desired menu object contained by current loop for (var i=0; i
"; // for (curProperty2 in l[curProperty]) { // result += " " + curProperty2 + "=" + [l.curProperty].[curProperty2] + "
"; // result += " " + curProperty2 + "=" + l[curProperty][curProperty2] + "
"; // for (curProperty3 in l.curProperty.curProperty2) { // result += "\t\t" + curProperty3 + "=" + "
"; // } // } } document.write(result); return true;} */ } } hideActiveMenus(l); return true; } /*************************/ // It doesn't appear that the parm (l) is being used here -- why is that? function hideActiveMenus(l) { if (!window.activeMenus) // if no active menus, then { return // ... return to calling routine } MM_swapImgRestore(); for (var i=0; i < window.activeMenus.length; i++) // process each active menu as follows: { if (!activeMenus[i]) // if no (more) active menus, then { return // ... return to calling routine } if (activeMenus[i].visibility && activeMenus[i].Menu) // browser sniff: if Netscape DOM, then { activeMenus[i].visibility = "hidden"; // ... hide menu using Netscape properties activeMenus[i].Menu.container.visibility = "hidden"; activeMenus[i].Menu.container.clip.left = 0; } else if (activeMenus[i].style) // browser sniff: if IE DOM, then { activeMenus[i].style.visibility = "hidden"; // ... hide menu using IE properties } } // finish loop processing document.onmousemove = mouseTracker; // ??? window.activeMenus.length = 0; // set number of active menus to 0 } /*************************/ function mouseTracker(e) { e = e || window.Event || window.event; window.pageX = e.pageX || e.clientX; window.pageY = e.pageY || e.clientY; } /*************************/ function setMouseTracker() { if (document.captureEvents) { document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } document.onmousemove = this.mouseTracker; document.onmouseup = this.hideMenu; }