Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

I'm failing to get a Javascript to run in Firefox that runs great in IE...need help with debugging.

more options

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)

more options

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...)