// JS for menu building /* DO NOT EDIT */ /* Main_menus[i][0] = Name Main_menus[i][1] = Display Main_menus[i][2] = URL Main_menus[i][3] = Width Sub_menus[i][0] = Display Sub_menus[i][1] = URL Sub_menus[i][2] = Extras = new Array Sub_menus[i][2][0] = Display; Sub_menus[i][2][1] = URL; ---------------------------------------- | menus item | menus item | menus item | ---------------------------------------- | sub menu | | sub menu |-------------- | sub menu | sub sub menu| | sub menu | sub sub menu| -------------| sub sub menu| --------------- Basic operating idea is that.... - all items a zindexed above the rest of the document by <DIV> tags - all items are positioned relative to the <DIV> tag they are in. - the <DIV> tags a nested as main menu conatins sub menus that contain sub sub menus. - This allows the user to position everything without having to do the maths on positioning them. - each menu has a mouse over that calls show(id) to shows the menu and hides everything else - each menu has a mouse out that calls hide() to start a timer that hide the menu when times outs - each sub menu has a mouse over that calls stay t oturn off the timer - each sub menu has a mouse out event that starts the timer again - each item has a mouse over that calls highlight to high light the menu item - each item has a mouse out that calls lowlight to return the menu item to its normal state. - ecah of the sub sub menus works the same wasy as the sub menu sbut with their own fucntiosn (denoted by a _s) - Menu construction is done via calls to add menu, add sub menu and add sub sub menu. Known limitations - Not tested on netscape - Not tested below IE 6 - No check for putting a sub sub menu off the right edge of the screen - Naming should be improved to prevent possible conflects with other scripts on same page. */ var timerID = null; // Timer for how long main sub menus stays open var subTimer = null; // Timer for how long the sub sub menus stay open var visID = null; // The id of the sub menu that is open var visSub = null; // The id of the sub sub menu that is open var TotalWidth = 0; // How wide the enter manin menu table is var loaded = false; // If the menus have been made yet var Main_menus = new Array(); // Array for main menus var Sub_menus = new Array(); // array for sub menus BasePath = "./E3EgSkippers_files/"; // this sets the base of all the addresses used in the menus GFXPath = "GFX/"; // where the graphics files are BorderColor = "#663300"; // Color for item borders NormalBGColor = "#333333"; // The color of the back ground for the menus HighlightColor = "#FFCC33"; // The color of the back ground for the menu items when the mouse is over them DropDownBorderColor = "#333333"; DropDownNormalColor = "#333333"; DropDownHighlightColor = "#663300"; DropDownTextColor = "#663300"; DropDownTextHightlight = "#FFFFFF"; TextColor = "#FFFFFF"; // The normal color of the menu item text TextHightlight = "#000000"; Timout = 500; /******************************************************************************/ /* */ /* Name : AddMainMenu */ /* Passed : Name - string - the name for the menu item */ /* Display - string - the text to display in the menu */ /* URL - string - the URL to put in the hyperlink */ /* width - string - the width to make the menu item */ /* Returns : Nothing */ /* Purpose : Adds a new item to the main menu array */ /* */ /******************************************************************************/ function AddMainMenu(Name,Display,URL,width) { var count = Main_menus.length; // get the number of items already in array Main_menus[count] = new Array(Name,Display,URL,width); // Add the details for this menu in an array to the main array Sub_menus[count] = new Array(); // Create the array for the sub menu for this this menu TotalWidth = TotalWidth + eval(width); // Add up the new width } /******************************************************************************/ /* */ /* Name : WriteStyle */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Writes the CSS that is used to control the look and feel of the */ /* menus */ /* */ /******************************************************************************/ function WriteStyle() { var str = "<STYLE>"; str += "TD.MenuItemLeft_S, .MenuItemLeft_S a:link, .MenuItemLeft_S a:active, .MenuItemLeft_S a:visited, .MenuItemLeft_S a:hover"; str += "{ border-left : 1px solid "+DropDownBorderColor+";" str += "border-top:1px solid "+DropDownBorderColor+";" str += "border-bottom :1px solid "+DropDownBorderColor+";" str += "text-indent: 2px;" str += "position : relative;" str += "left : 0px;" str += "top : 0px;" str += "height : 18px;" str += "background-color : " + DropDownNormalColor + ";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+DropDownTextColor+";" str += "text-decoration: none;" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;" str += "text-align : left;}" str += "TD.MenuItemRight_S" str += "{ border-Right : 1px solid "+DropDownBorderColor+";" str += "border-top:1px solid "+DropDownBorderColor+";" str += "border-bottom :1px solid "+DropDownBorderColor+";" str += "text-align : right;" str += "vertical-alignment : middle;" str += "position : relative;" str += "left : 0px;" str += "top : 0px;" str += "background-color : " + DropDownNormalColor + ";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+DropDownTextColor+";" str += "text-decoration: none;" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;}" str += "TD.MenuItem_S, .MenuItem_S a:link, .MenuItem_S a:active, .MenuItem_S a:visited, .MenuItem_S a:hover" str += "{ border-Right : 1px solid "+DropDownBorderColor+";" str += "border-Left : 1px solid "+DropDownBorderColor+"; " str += "border-top:1px solid "+DropDownBorderColor+"; " str += "border-bottom :1px solid "+DropDownBorderColor+";" str += "position : relative;" str += "text-indent: 2px;" str += "left : 0px;" str += "top : 0px;" str += "height : 18px;" str += "background-color : " + DropDownNormalColor + ";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+DropDownTextColor+";" str += "text-decoration: none;" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;}" str += "TD.MenuItemLeft, .MenuItemLeft a:link, .MenuItemLeft a:active, .MenuItemLeft a:visited, .MenuItemLeft a:hover" str += "{ border-left : 1px solid "+BorderColor+";" str += "border-top:1px solid "+BorderColor+";" str += "border-bottom :1px solid "+BorderColor+";" str += "text-indent: 2px;" str += "position : relative;" str += "left : 0px;" str += "top : 0px;" str += "height : 18px;" str += "background-color : "+NormalBGColor+";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+TextColor+";" str += "text-decoration: none;" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;" str += "text-align : left;}" str += "TD.MenuItemRight" str += "{ border-Right : 1px solid "+BorderColor+";" str += "border-top:1px solid "+BorderColor+";" str += "border-bottom :1px solid "+BorderColor+";" str += "text-align : right;" str += "vertical-alignment : middle;" str += "position : relative;" str += "left : 0px;" str += "top : 0px;" str += "background-color : "+NormalBGColor+";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+TextColor+";" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;}" str += "TD.MenuItem" str += "{ border-Right : 1px solid "+BorderColor+";" str += "border-Left : 1px solid "+BorderColor+"; " str += "border-top:1px solid "+BorderColor+"; " str += "border-bottom :1px solid "+BorderColor+";" str += "position : relative;" str += "text-indent: 2px;" str += "left : 0px;" str += "top : 0px;" str += "height : 18px;" str += "background-color : "+NormalBGColor+";" str += "font-weight : normal;" str += "font-size : 12;" str += "color : "+TextColor+";" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;}" str += "TR.MenuRow " str += "{ background-color : "+NormalBGColor+";" str += "font-family : sans-serif; " str += "cursor: pointer; " str += "text-decoration: none;" str += "position : relative;" str += "color : "+TextColor+";" str += "display : inline;}" str += "TABLE.MenuTable" str += "{ visibility: hidden; }" str += "div.MainMenu {" str += "height : 18px;" str += "display : inline;" str += "background-color : "+NormalBGColor+";" str += "FONT-FAMILY: Arial, Helvetica, sans-serif;" str += "}" str += "div.SubMenu {" str += "top : 1;" str += "position : absolute;" str += "background-color : #FF0000;" str += "left : 1;" str += "height : 1;" str += "right : 1;" str += "width : 1;" str += "}" str += "</STYLE>" document.write(str); } /******************************************************************************/ /* */ /* Name : AddSubMenu */ /* Passed : Name - string - the name for the menu items parent */ /* Display - string - the text to display in the menu */ /* URL - string - the URL to put in the hyperlink */ /* Returns : Nothing */ /* Purpose : Adds a new item to the sub menu array */ /* */ /******************************************************************************/ function AddSubMenu(Name,Display,URL) { var found = false; for (i=0;i<Main_menus.length;i++) if (Main_menus[i][0] == Name) { found = true; break; } if (found == true) { count = Sub_menus[i].length; Sub_menus[i][count] = new Array(URL,Display); Sub_menus[i][count][2] = new Array(); } } /******************************************************************************/ /* */ /* Name : AddSubSubMenu */ /* Passed : Name - string - the name for the menu items parent */ /* : Pos - string - what sub menu to attach to */ /* Display - string - the text to display in the menu */ /* URL - string - the URL to put in the hyperlink */ /* Returns : Nothing */ /* Purpose : Adds a new item to the sub menu array */ /* */ /******************************************************************************/ function AddSubSubMenu(Name,Pos,Display,URL) { var found = false; for (i=0;i<Main_menus.length;i++) if (Main_menus[i][0] == Name) { found = true; break; } if (found == true) { Pos = Pos - 1; count = Sub_menus[i][Pos][2].length Sub_menus[i][Pos][2][count] = new Array(URL,Display); } } /******************************************************************************/ /* */ /* Name : hide */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Hides the visible sub menu */ /* */ /******************************************************************************/ function hide() { if (timerID == null) timerID = window.setTimeout("kill()",Timout); if (visID != null) hide_s(); } /******************************************************************************/ /* */ /* Name : hide_s */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Hides the visible sub sub menu */ /* */ /******************************************************************************/ function hide_s() { if (subTimer == null) subTimer = window.setTimeout("kill_s()",Timout); } /******************************************************************************/ /* */ /* Name : show */ /* Passed : id - string - the id of the item to be shown */ /* Returns : Nothing */ /* Purpose : Hides all open menus and shows the one given by id */ /* */ /******************************************************************************/ function show(id) { if (loaded) { if (timerID != null) { window.clearTimeout(timerID); timerID = null; } if (subTimer != null) { window.clearTimeout(subTimer); subTimer = null; } if (visID != null) { o = eval(visID); o.style.display = "none"; // o.style.visibility = "hidden"; } if (visSub != null) { o = eval(visID); // o.style.visibility = "hidden"; o.style.display = "none"; } o = eval(id); // o.style.visibility = "visible"; visID = id; // alert(o.style.display); o.style.display = "inline"; // alert(o.style.display); } } /******************************************************************************/ /* */ /* Name : Kill */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Hides the visible sub menu and kills its timer */ /* */ /******************************************************************************/ function kill() { if (visID != null) { o = eval(visID); // o.style.visibility = "hidden"; o.style.display = "none"; } window.clearTimeout(timerID); visID = null; timerID = null; } /******************************************************************************/ /* */ /* Name : Kill_s */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Hides the visible sub sub menu and kills its timer */ /* */ /******************************************************************************/ function kill_s() { if (visSub != null) { o = eval(visSub); o.style.display = "none"; // o.style.visibility = "none"; } window.clearTimeout(subTimer); visSub = null; subTimer = null; hide() } /******************************************************************************/ /* */ /* Name : stay */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : turns the timer off so that the visible menu wont be hidden */ /* */ /******************************************************************************/ function stay() { if (visID != null) { if (timerID != null) window.clearTimeout(timerID); timerID = null; if (subTimer != null) window.clearTimeout(subTimer); subTimer = null; } } /******************************************************************************/ /* */ /* Name : stay_s */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : turns the timers off so that the visible menu wont be hidden */ /* */ /******************************************************************************/ function stay_s() { if (visSub != null) { if (subTimer != null) window.clearTimeout(subTimer); subTimer = null; if (timerID != null) window.clearTimeout(timerID); timerID = null; } } /******************************************************************************/ /* */ /* Name : HighLight_Sub */ /* Passed : id - string - the id of the sub menu to highlight */ /* Returns : Nothing */ /* Purpose : High lights sub menu id */ /* */ /******************************************************************************/ function HighLight_Sub(id) { if (visSub != null) { o = eval(visSub); // o.style.visibility = "hidden"; o.style.display = "none"; visSub = null; window.clearTimeout(subTimer); subTimer = null; } if (document.getElementById(id)) { obj = eval(id); obj.style.backgroundColor = DropDownHighlightColor; obj.style.color = DropDownTextHightlight; obj.style.textDecoration = "underline"; } else { obj = eval(id+"_L"); obj.style.backgroundColor = DropDownHighlightColor; obj.style.color = DropDownTextHightlight; obj.style.textDecoration = "underline"; obj = eval(id+"_R"); obj.style.backgroundColor = DropDownHighlightColor; obj.style.color = DropDownTextHightlight; o = eval(id+"S"); // o.style.visibility = "visible"; o.style.display = "inline"; visSub = id+"S"; } } /******************************************************************************/ /* */ /* Name : LowLight_Sub */ /* Passed : id - string - the id of the sub menu to lowlight */ /* Returns : Nothing */ /* Purpose : low lights sub menu id */ /* */ /******************************************************************************/ function LowLight_Sub(id) { if (document.getElementById(id)) { obj = eval(id); obj.style.backgroundColor = DropDownNormalColor; obj.style.color = DropDownTextColor; obj.style.textDecoration = "none"; } else { obj = eval(id+"_L"); obj.style.backgroundColor = DropDownNormalColor; obj.style.color = DropDownTextColor; obj.style.textDecoration = "none"; obj = eval(id+"_R"); obj.style.backgroundColor = DropDownNormalColor; obj.style.color = DropDownTextColor; } } /******************************************************************************/ /* */ /* Name : HighLight */ /* Passed : Obj - object - the item to hightlight */ /* Returns : Nothing */ /* Purpose : Highlight obj */ /* */ /******************************************************************************/ function HighLight(obj) { obj.style.backgroundColor = DropDownHighlightColor; obj.style.color = DropDownTextHightlight; obj.style.textDecoration = "underline"; } /******************************************************************************/ /* */ /* Name : LowLight */ /* Passed : Obj - object - the item to LowLight */ /* Returns : Nothing */ /* Purpose : LowLights obj */ /* */ /******************************************************************************/ function LowLight(obj) { obj.style.backgroundColor = DropDownNormalColor; obj.style.color = DropDownTextColor; obj.style.textDecoration = "none"; } /******************************************************************************/ /* */ /* Name : HighLight_Main */ /* Passed : id - string - the id of the main menu to high light */ /* Returns : Nothing */ /* Purpose : High lights the amin menu given by id */ /* */ /******************************************************************************/ function HighLight_Main(id) { if (visSub != null) { o = eval(visSub); // o.style.visibility = "hidden"; o.style.display = "none"; visSub = null; window.clearTimeout(subTimer); subTimer = null; } obj = eval(id + "_ML"); obj.style.backgroundColor = HighlightColor; obj.style.color = TextHightlight; obj.style.textDecoration = "underline"; obj = eval(id + "_MR"); obj.style.backgroundColor = HighlightColor; obj.style.color = TextHightlight; } /******************************************************************************/ /* */ /* Name : LowLight_Main */ /* Passed : id - string - the id of the main menu to low light */ /* Returns : Nothing */ /* Purpose : low lights the main menu given by id */ /* */ /******************************************************************************/ function LowLight_Main(id) { obj = eval(id + "_ML"); obj.style.backgroundColor = NormalBGColor; obj.style.color = TextColor; obj.style.textDecoration = "none"; obj = eval(id + "_MR"); obj.style.backgroundColor = NormalBGColor; obj.style.color = TextColor; } /******************************************************************************/ /* */ /* Name : MakeMenus */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Creates the HTML for the menu system, called by the web page as */ /* it loads */ /* */ /******************************************************************************/ function MakeMenus() { WriteStyle(); var str = ""; var str = ""; var URL; var Width; var Name; var Display; var GFX; var GFXS; str += "<DIV CLASS=MainMenu style=\"position:relative;left:0;top:0;\">"; str += "<TABLE CELLPADING=0 CELLSPACING=0 WIDTH="+TotalWidth+"px HEIGHT=18 ID=MainMenu BORDER=0>"; str += "<TR CLASS=MenuRow>" for (i=0;i<Main_menus.length;i++) { URL = BasePath+Main_menus[i][2]; Name = Main_menus[i][0]; Width = eval(Main_menus[i][3]);// -20; Display = Main_menus[i][1]; GFX = BasePath + GFXPath + "BSSMenuDown.gif"; GFXS = BasePath + GFXPath + "BSSMenuSpacer.gif"; str += "<A HREF="+URL+">"; str += "<TD CLASS=MenuItemLeft onmouseover=\"HighLight_Main('"+Name+"'),show("+Name+")\" onmouseout=\"LowLight_Main('"+Name+"'),hide()\" ID="+Name+"_ML width="+Width+" STYLE=\"text-decoration : none\"><A HREF="+URL+">"+Display+"</A></TD>"; str += "<td class=MenuItemRight onmouseover=\"HighLight_Main('"+Name+"'),show("+Name+")\" onmouseout=\"LowLight_Main('"+Name+"'),hide()\" ID="+Name+"_MR> </TD></A>"; /* if (Sub_menus[i].length > 0) str += "<td class=MenuItemRight onmouseover=\"HighLight_Main('"+Name+"'),show("+Name+")\" onmouseout=\"LowLight_Main('"+Name+"'),hide()\" ID="+Name+"_MR width=18><img src="+GFX+"></TD></A>"; else str += "<td class=MenuItemRight onmouseover=\"HighLight_Main('"+Name+"'),show("+Name+")\" onmouseout=\"LowLight_Main('"+Name+"'),hide()\" ID="+Name+"_MR width=18><img src="+GFXS+"></TD></A>"; */ } str += "</TR></TABLE>"; document.write(str); MakeSubMenus(); document.write("</DIV>"); } /******************************************************************************/ /* */ /* Name : CalcPos */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Called on the on load event, updates the position of sub menus */ /* and sub sub menus to correct positition. Needed as offsetHeight */ /* type fucntions don't work untill the page is loaded */ /* */ /******************************************************************************/ function CalcPos() { var top = MainMenu.offsetHeight; var left = 0; var width; var height; var ID; var obj; var menu var str; if (!loaded) { for (i=0;i<Main_menus.length;i++) { top = MainMenu.offsetHeight; ID = Main_menus[i][0]; obj = eval(ID+"_ML"); left = obj.offsetLeft; obj = eval(ID+"_DIV"); str = top + "px" obj.style.top = str; str = left + "px" obj.style.left = str; obj = eval(ID); menu = obj; menu.style.display = "inline"; top =0; for (j=0;j<Sub_menus[i].length;j++) // sub menus { ID = ID = Main_menus[i][0] + "_Sub" + j; if (document.getElementById(ID)) obj = eval(ID); else obj = eval(ID+"_L"); top += obj.offsetHeight; if (Sub_menus[i][j][2].length > 0) // if subsub menu { ID = Main_menus[i][0] obj = eval(ID); width = obj.offsetWidth; ID = ID + "_Sub" + j; obj = eval(ID+"_L"); height = obj.offsetHeight; obj = eval(ID+"_DIV"); obj.style.left = width; obj.style.top = top - height; obj = eval(ID+"S"); } } menu.style.visiblity = "visible"; menu.style.display = "none"; } loaded = true; } } /******************************************************************************/ /* */ /* Name : MakeSubSubMenus */ /* Passed : i - integer - the main menu this sub menu belongs to */ /* Returns : Nothing */ /* Purpose : Creates the HTML for the sub sub menu system, called by */ /* makesubmenus */ /* */ /******************************************************************************/ function MakeSubSubMenus(i) { var str = ""; var URL; var ID; var top; var Display; var TDID for (j=0;j<Sub_menus[i].length;j++) // sub menus { if (Sub_menus[i][j][2].length > 0) { str = ""; ID = Main_menus[i][0] ID = ID + "_Sub" + j; str += "<DIV STYLE=\"zindex:5;position:absolute;left:0;top:30;width:120;\" ID="+ID+"_DIV>"; str += "<TABLE width=100% ID="+ID+"S cellpadding=0 cellspacing=0 STYLE=\"display :none\" onMouseover=\"stay_s()\" onmouseout=\"hide_s()\">" for (k=0;k<Sub_menus[i][j][2].length;k++) // each sub group { TDID = ID +"S"+k; URL = BasePath + Sub_menus[i][j][2][k][0]; Display = Sub_menus[i][j][2][k][1]; str = str + "<TR onmouseover=\"HighLight("+TDID+")\" onmouseout=\"LowLight("+TDID+")\"><A HREF="+URL+"><TD class=MenuItem_S ID="+TDID+" STYLE=\"text-decoration : none\" nowrap><A HREF="+URL+">"+Display+"</A></TD></A></TR>"; } str = str + "</TABLE>"; document.write(str); document.write("</DIV>"); } } } /******************************************************************************/ /* */ /* Name : MakeSubMenus */ /* Passed : Nothing */ /* Returns : Nothing */ /* Purpose : Creates the HTML for the sub sub menu system, called by */ /* MakeMenus */ /* */ /******************************************************************************/ function MakeSubMenus() { var str = ""; var URL; var ID; for (i=0;i<Main_menus.length;i++) { str = ""; ID = Main_menus[i][0]; GFX = BasePath + GFXPath + "BSSMenuSide.gif"; str += "<DIV STYLE='zindex:6;position:absolute;left:0;top:30;width:170px;' ID="+ID+"_DIV>"; str += "<TABLE width='170' ID="+ID+" cellpadding=0 cellspacing=0 STYLE=\"width:'170px'; zindex:6;display:none;visiblity:hidden\" onMouseout=\"hide()\" onMouseover=\"stay()\" >" for (j=0;j<Sub_menus[i].length;j++) { URL = BasePath + Sub_menus[i][j][0]; ID = Main_menus[i][0] + "_Sub" + j; str += "<TR width=100% onmouseover=\"HighLight_Sub('"+ID+"')\" onmouseout=\"LowLight_Sub('"+ID+"')\"><a href="+URL+" >" if (Sub_menus[i][j][2].length == 0 ) str += "<TD border=1 ID="+ID+" class=MenuItem_S WIDTH=100% colspan=2 STYLE=\"text-decoration : none\"><A HREF="+URL+">"+Sub_menus[i][j][1]+"</A></TD>"; else str += "<TD ID="+ID+"_L class=MenuItemLeft_S WIDTH=100% STYLE=\"text-decoration : none\"><A HREF="+URL+">"+Sub_menus[i][j][1]+"</A></TD><TD ID="+ID+"_R class=MenuItemRight_S width=18px><img src="+GFX+"></TD>"; str += "</A></TR>"; } str += "</TABLE>"; document.write(str); MakeSubSubMenus(i); document.write("</DIV>"); } }