Link to home
Start Free TrialLog in
Avatar of tamilgirl77
tamilgirl77

asked on

Javascript pull down menu not working in firefox

Hi,

 I have a menu navigation which works fine in IE but not in firefox. Can someone please help me with what is wrong in the code. In the following code the menu expands for first two items and does not expand for third and 6th one. Thanks for your help.

Navigation.html:
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li,
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "- ";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
ul#menu2 {
  width: 150px;
  list-style-type: none;
  margin: 0;
  padding: 0px;
 
}
</style>
<script type="text/javascript" src="menu.js"></script>

</head>

<body>

<div id="leftnavigation">
<!--left menu with subitems-->
    <ul id="menu">
             <li>Link1 Section
                  <ol>
                      <li> <a href="">Link1</a></li>
                <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
           <li> <a href="">Link1</a></li>
                  </ol>
              </li>
            <li>Link2 Section
               <ol>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                    <li><a href="">link2</a></li>
                   <li><a href="">link2</a></li>
                 </ol>
              </li>
           <li>Link3 Section
               <ol>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                    <li><a href="">link3</a></li>
                   <li><a href="">link3</a></li>
                 </ol>
              </li>
        </ul>
<!--left menu with no subitems-->
 <ul id="menu2">
     <li><a href="">Section4 no sublinks</a></li>
    <li><a href="">Section5 no sublinks</a>
    </li>

  </ul>
<!--left menu with sub items-->
  <ul id="menu">
           <li>test
                <ol>
                    <li> <a href="">test</a></li>
                 </ol>
             </li>
    </ul>  

</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
menu.js:
---------------
<!-- Paste this code into an external JavaScript file named: expandingMenu.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
     
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
     
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
     
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

/*function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}
*/

function initMenu(){
     
     
 var menus, menu, text, a, i;
  var arrNav = document.getElementsByTagName("ul");
 
  for(var n=0;n<arrNav.length;n++){
    if(arrNav[n].id=="menu")
     {
          alert(arrNav[n].id);
          //menus = getChildrenByElement(document.getElementById(arrNav[n].id));
           menus = arrNav[n].getElementsByTagName("li");
           
      for (var i=0; i<menus.length; i++)
       {
            alert(i);
       
                  if(pagenum==1000)
                  {
                    menu = menus[i];
                    text = getFirstChildByText(menu);
                    a = document.createElement("a");
                    menu.replaceChild(a, text);
                    a.appendChild(text);
                    a.href = "javascript:void(0)";
                    a.onclick = showMenu;
                    a.onfocus = function(){this.blur()};
                  }
                  else if(i == pagenum) {
                         
                            menu = menus[i];
                            text = getFirstChildByText(menu);
                            a = document.createElement("a");
                            menu.replaceChild(a, text);
                            a.appendChild(text);
                            a.href = "javascript:void(0)";
                            a.onfocus = showMenu;
                            a.focus();
                    }
                    else{
                         
                    menu = menus[i];
                    text = getFirstChildByText(menu);
                    a = document.createElement("a");
                    menu.replaceChild(a, text);
                    a.appendChild(text);
                    a.href = "javascript:void(0)";
                    a.onclick = showMenu;
                    a.onfocus = function(){this.blur()};
                    }
            }
     }
  }
}


practices= location.href.toLowerCase();


if(location.href.toLowerCase().indexOf("Our_information")>=0){
     var pagenum = 0;
}
if(location.href.toLowerCase().indexOf("Committees")>=0){
     var pagenum = 1;
}
if(location.href.toLowerCase().indexOf("Training")>=0) {
     var pagenum = 1;
}
if(location.href.toLowerCase().indexOf("Forms")>=0) {
var pagenum = 2;
}


if(document.createElement) window.onload = initMenu;


ASKER CERTIFIED SOLUTION
Avatar of dakyd
dakyd

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of tamilgirl77
tamilgirl77

ASKER

That is cool, thank you very much, it worked perfectly