I'm failing to get a Javascript to run in Firefox that runs great in IE...need help with debugging.
I'm getting the error below but don't know what to do about it since I can't code Javascript. As I state before, IE runs this code just fine...I can't figure out why Firefox won't let it run. This cascading menu .js is just what I need for a charity website I'm helping to set up. The html portion is also shown below the .js
Error: menu is undefined Source File: file:///C:/Documents%20and%20Settings/Ray/My%20Documents/ECCHS_Website/CascadeMenu.js Line: 8
Here's the code for CascadeMenu.js
function InitMenu()
{
var bar = menuBar.children
for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hide"
bar[i].onmouseover = new Function ("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)
if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)
if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}
function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}
function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)
}
function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children
for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}
if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)
childMenu.style.visibility = "hidden"
}
}
}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
///////////////////CascadedDropdown Menu/////////////////
//Date : 08/09/2001 //
//Version : 1.0 //
//Author Mr.Arun N Kumar //
//EMail: n_arunk@hotmail.com //
/////////////////////////////////////////////////////////
// Modifications on this code is not recomended
// Suggestions are welcome
<html>
<head>
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>
<body OnLoad="InitMenu()"
Onclick="HideMenu(menuBar)" ID="Bdy"
bgColor=aliceblue>
<font color="#6B8174"><b> East Contra Costa
Historical<br>Society Content Menus</b></font><div
align="center">
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Menu
#1</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Menu
#2</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Menu
#3</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Menu
#4</DIV></center>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem"
menu="menu6">SubMenu
#1</div>
<div Id="menuItem1_2" class="menuItem"
title="JavaScripts"
cmd="http://javascript.internet.com/">JavaScript
Source</div>
<div Id="menuItem1_3" class="menuItem"
title="WDVL"
cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page
#1</div>
<div Id="menuItem2_2" class="menuItem">Page
#2</div>
<div Id="menuItem2_3" class="menuItem">Page
#3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page
#1</div>
<div Id="menuItem3_2" class="menuItem">Page
#2</div>
<div Id="menuItem3_3" class="menuItem">Page
#3</div>
<div Id="menuItem3_4" class="menuItem"
menu="menu5">SubMenu
#4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page
#1</div>
<div Id="menuItem4_2" class="menuItem">Page
#2</div>
<div Id="menuItem4_3" class="menuItem">Page
#3</div>
<div Id="menuItem4_4" class="menuItem">Page
#4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page
#4-1</div>
<div Id="menuItem5_2" class="menuItem">Page
#4-2</div>
<div Id="menuItem5_3" class="menuItem">Page
#4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Page
#1-1</div>
<div Id="menuItem6_2" class="menuItem">Page
#1-2</div>
<div Id="menuItem6_3" class="menuItem"
menu="menu7">SubMenu
#1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page
#1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page
#1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page
#1-1-3</div>
</div><!-- End of Menu --><br>
</body>
</html>I'm getting the error below but don't know what to do about it since I can't code Javascript. As I state before, IE runs this code just fine...I can't figure out why Firefox won't let it run. This cascading menu .js is just what I need for a charity website I'm helping to set up. The html portion is also shown below the .js
Error: menu is undefined
Source File: file:///C:/Documents%20and%20Settings/Ray/My%20Documents/ECCHS_Website/CascadeMenu.js
Line: 8
Here's the code for CascadeMenu.js
<pre><nowiki> function InitMenu()
{
var bar = menuBar.children
for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hide"
bar[i].onmouseover = new Function ("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)
if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)
if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}
function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}
function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)
}
function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children
for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}
if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)
childMenu.style.visibility = "hidden"
}
}
}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
///////////////////CascadedDropdown Menu/////////////////
//Date : 08/09/2001 //
//Version : 1.0 //
//Author Mr.Arun N Kumar //
//EMail: n_arunk@hotmail.com //
/////////////////////////////////////////////////////////
// Modifications on this code is not recomended
// Suggestions are welcome
<html>
<head>
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>
<body OnLoad="InitMenu()"
Onclick="HideMenu(menuBar)" ID="Bdy"
bgColor=aliceblue>
<font color="#6B8174"><b> East Contra Costa
Historical<br>Society Content Menus</b></font><div
align="center">
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Menu
#1</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Menu
#2</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Menu
#3</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Menu
#4</DIV></center>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem"
menu="menu6">SubMenu
#1</div>
<div Id="menuItem1_2" class="menuItem"
title="JavaScripts"
cmd="http://javascript.internet.com/">JavaScript
Source</div>
<div Id="menuItem1_3" class="menuItem"
title="WDVL"
cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page
#1</div>
<div Id="menuItem2_2" class="menuItem">Page
#2</div>
<div Id="menuItem2_3" class="menuItem">Page
#3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page
#1</div>
<div Id="menuItem3_2" class="menuItem">Page
#2</div>
<div Id="menuItem3_3" class="menuItem">Page
#3</div>
<div Id="menuItem3_4" class="menuItem"
menu="menu5">SubMenu
#4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page
#1</div>
<div Id="menuItem4_2" class="menuItem">Page
#2</div>
<div Id="menuItem4_3" class="menuItem">Page
#3</div>
<div Id="menuItem4_4" class="menuItem">Page
#4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page
#4-1</div>
<div Id="menuItem5_2" class="menuItem">Page
#4-2</div>
<div Id="menuItem5_3" class="menuItem">Page
#4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Page
#1-1</div>
<div Id="menuItem6_2" class="menuItem">Page
#1-2</div>
<div Id="menuItem6_3" class="menuItem"
menu="menu7">SubMenu
#1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page
#1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page
#1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page
#1-1-3</div>
</div><!-- End of Menu --><br>
</body>
</html></nowiki></pre>
Modified by cor-el
All Replies (1)
I found a download of Cascade Menu with files from 2001. I also found a discussion thread as of 2006 indicating problems with the script in Firefox as of that time (Menubar Script problem in FireFox [Archive - WebDeveloper.com]). The web and web browsers have changed a lot during the past decade, so you might find it more efficient to get a new menu script than to fix this old one. (It might not even work in IE9 any more...)