1 /* -------------------------------------------------------------------------- */
3 (c) 2004-2005 U.S. Robotics Corporation.
5 /* -------------------------------------------------------------------------- */
7 /* --------------------------------------------------------------------------
9 Define the information for a single menu item (both main bar and sub-menu).
10 Each menu item has an associated filename, name, and description.
11 The name and description are translated, but not the filename.
13 The menu bar object contains an array of dropdown menus.
14 The dropdown menu object contains an array of menu commands.
16 The calling page should call the appropriate members to construct a menubar.
18 var bar = new MenuBar(7);
20 var dropdown = bar.addDropdown("Menu One", 20);
21 dropdown.addItem("Command One", "This is the first item", "#");
22 dropdown.addItem("Command Two", "This is the second item", "#");
23 dropdown.addItem("Command Three", "This is the third item", "#");
25 dropdown = bar.addDropdown("Percoidei", 10);
26 dropdown.addItem("Remoras", "", "#");
27 dropdown.addItem("Tigerfishes", "", "#");
30 function MenuBar(iWidth)
32 // no sense passing this in because it's hardcoded in the CSS
33 this._strID = "idMenu"; // id of the entire menubar
35 this._iWidth = iWidth; // width of each menu item on the bar
36 this._menus = new Array(); // array of dropdown menus
39 this.addDropdown = function(strName, iWidth)
41 var dropdown = new MenuDropdown(strName, iWidth);
42 this._menus.push(dropdown);
47 This writes out the menu bar and its dropdown menus.
49 this.write = function()
51 document.write("<ul id=\"" + this._strID + "\">\n");
52 for (var i = 0; i < this._menus.length; ++i)
53 this._menus[i].write(this._iWidth);
54 document.write("<\/ul>\n");
60 This represents a dropdown menu.
62 function MenuDropdown(strName, iWidth)
64 this._strName = strName;
65 this._iWidth = iWidth;
66 this._menuItems = new Array();
69 this.addItem = function(strName, strDescription, strFilename)
71 this._menuItems.push(new MenuCommand(strName, strDescription, strFilename));
76 Writes the HTML for a dropdown menu.
78 <li width=X><label width=X>Menu One</label>
85 this.write = function(iWidth)
87 document.write("<li style=\"width: " + iWidth + "em;\"><label style=\"width: " + iWidth + "em;\">" + this._strName + "<\/label>");
88 document.write(" <ul style=\"width: " + this._iWidth + "em;\">\n");
89 for (var i = 0; i < this._menuItems.length; ++i)
90 this._menuItems[i].write(this._iWidth);
91 document.write(" <\/ul>\n");
92 document.write("<\/li>\n");
98 This represents a menu command.
100 function MenuCommand(strName, strDescription, strFilename)
102 this._strName = strName;
103 this._strDescription = strDescription;
105 this._strFilename = strFilename;
109 Writes the HTML for a single menu command.
111 <li width=Y><a width=Y href="#" title="...">Command One</a></li>
113 this.write = function(iWidth)
115 document.write("<li style=\"width: " + iWidth + "em;\"><a style=\"width: " + iWidth + "em;\" href=\"" + this._strFilename + "\" title=\"" + this._strDescription + "\">" + this._strName + "<\/a><\/li>\n");
121 /* --------------------------------------------------------------------------
123 This function works-around an IE bug.
125 Instead of copying the following code into every menu-using HTML file's head,
126 we make the HTML call initMenu() after the page is loaded.
128 <script type="text/javascript"><!--//--><![CDATA[//><!--
129 fctIEfix = function()
131 var eltsLI = document.getElementById("idMenu").getElementsByTagName("LI");
132 for (var i = 0; i < eltsLI.length; ++i)
134 eltsLI[i].onmouseover = function()
136 this.className += " clsIEhover";
138 eltsLI[i].onmouseout = function()
140 this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
144 // Do this for IE only.
145 if (window.attachEvent)
146 window.attachEvent("onload", fctIEfix);
154 We only need to do this kludge if it's IE.
155 (And if we do it for Firefox, it breaks.)
157 if (window.navigator.userAgent.indexOf("MSIE") <= 0)
161 // no sense passing this in because it's hardcoded in the CSS
162 var strMenuID = "idMenu";
164 // avoid error if there's no menu
165 var eltMenu = document.getElementById(strMenuID);
169 var eltsLI = eltMenu.getElementsByTagName("LI");
170 for (var i = 0; i < eltsLI.length; ++i)
172 eltsLI[i].onmouseover = function()
174 this.className += " clsIEhover";
176 eltsLI[i].onmouseout = function()
178 this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
186 fixIEselect(strMenuID);
189 /* --------------------------------------------------------------------------
191 BUG: IE always displays SELECT elements on top.
192 FIX: Shim an <IFRAME> below the <UL> element.
194 We insert an IFRAME as the first child of each submenu's UL
195 element and set their z-indexes so that the IFRAME is above
196 SELECT elements but below the UL submenu itself.
198 function fixIEselect(strMenuID)
201 We only need to do this kludge if it's IE.
203 if (window.navigator.userAgent.indexOf("MSIE") <= 0)
206 Only do it if there are <select> elements on the page.
208 if (document.getElementsByTagName("SELECT").length == 0)
212 var ieULs = document.getElementById(strMenuID).getElementsByTagName("UL");
213 // IE script to cover <SELECT> elements with <IFRAME>s
214 for (var i = 0; i < ieULs.length; i++)
216 var eltSubmenu = ieULs[i];
218 // The frame should be UNDER the submenu, so we set
219 // "opacity=80" to make it visible in case of a problem.
220 /* We use the DOM instead of manipulating the HTML directly.
221 eltSubmenu.innerHTML = "<iframe src=\"about:blank\" scrolling=\"no\" frameborder=\"no\" \
222 style=\"position: absolute; left: 0; top: 0; z-index: -1; \
223 filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);\">\
224 </iframe>" + eltSubmenu.innerHTML;
226 // get the IFRAME element and size it
227 //also works var eltOverlay = eltSubmenu.childNodes[0];
228 var eltOverlay = eltSubmenu.firstChild;
230 var eltOverlay = document.createElement("iframe");
231 eltOverlay.setAttribute("src", "about:blank");
232 eltOverlay.setAttribute("scrolling", "no");
233 eltOverlay.setAttribute("frameBorder", "no");
234 eltOverlay.style.position = "absolute";
235 eltOverlay.style.left = 0;
236 eltOverlay.style.top = 0;
237 eltOverlay.style.zIndex = -1;
238 eltOverlay.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);";
239 eltSubmenu.insertBefore(eltOverlay, eltSubmenu.firstChild);
241 // the width of the submenu, the <li> elements of the submenu <ul> tag
242 eltOverlay.style.width = eltSubmenu.offsetWidth + "px";
244 // // Calculate height of "tallest/longest" menu
245 // var iNumItems = eltSubmenu.getElementsByTagName("LI").length;
246 // eltOverlay.style.height = (iNumItems * eltSubmenu.offsetHeight) + "px";
247 eltOverlay.style.height = eltSubmenu.offsetHeight + "px";
249 // put the submenu on top
250 eltSubmenu.style.zIndex = "99";