Menubar Script problem in FireFox

[Hollow_man69]

This script works fine in IE, but generates an error in Firefox. Firefox displays the error ( "menuBar is not defined" ) as occuring in the 3rd line "var bar = menuBar.children". Can anyone suggest how I can fix this?

Thanks.


Here is the code:


---------------------

function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
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

[CrazyMerlin]

where do you declare the menu?

[Hollow_man69]

The menu is declared within the HTML document. An accompanying stylesheet controls how it looks on the page.

Here is the code within the HTML document:

<link href="CascadeMenu.css" rel="stylesheet" />
<script language="JavaScript" src="CascadeMenu.js" type="text/javascript">
</script>
.
.
.

<div id="menuBar" class="menuBar" >
<div id="Bar1" class="Bar" menu="menu1">Food Menu</div>
</div>
<!--MenuItem Definition -->
<div id="menu1" class="menu" >
<div id="menuItem1_1" class="menuItem" title="Burgers" cmd="burgers.html">Burgers</div>
<div id="menuItem1_2" class="menuItem" title="Sandwiches" cmd="sandwiches.html">Sandwiches</div>
<div id="menuItem1_3" class="menuItem" title="Salads" cmd="salad.html">Salads</div>
<div id="menuItem1_4" class="menuItem" title="Fried Chicken" cmd="chicken.html">Fried Chicken</div>

</div>

[klanga2049]

This may not have anything to do with your problem, but your script references the property "parentElement," which is implemented only in Internet Explorer. In FireFox, it returns null. "parentNode" is the correct, portable name for this property. Changing this will fix other errors in your script under FireFox, and possibly even the one you're asking about.

[klanga2049]

The menu is declared within the HTML document. An accompanying stylesheet controls how it looks on the page.

Here is the code within the HTML document:

<link href="CascadeMenu.css" rel="stylesheet" />
<script language="JavaScript" src="CascadeMenu.js" type="text/javascript">
</script>
.
.
.

<div id="menuBar" class="menuBar" >



The problem is that menuBar is not declared in JavaScript. The
proper way to declare it is as follows:

function InitMenu()
{
var menuBar = document.getElementById("menuBar");

// NOW menuBar is a valid JavaScript variable that references
// the "menuBar" DIV.
var bar = menuBar.children;

// yada yada, and fix that parentElement bug!

[Hollow_man69]

Thanks. I've made the changes suggested.

I think there's also a problem using ".children". How can I redo this line of code so that it will satisfy Firefox?

var bar = menuBar.children;