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(no de){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(ac tiveMenu). style.disp lay = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(th is).style. display = "block";
activeMenu = this;
}
return false;
}
/*function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(docum ent.getEle mentById(" 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.getElementsByTagN ame("ul");
for(var n=0;n<arrNav.length;n++){
if(arrNav[n].id=="menu")
{
alert(arrNav[n].id);
//menus = getChildrenByElement(docum ent.getEle mentById(a rrNav[n].i d));
menus = arrNav[n].getElementsByTag Name("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.toLowerCa se().index Of("Our_in formation" )>=0){
var pagenum = 0;
}
if(location.href.toLowerCa se().index Of("Commit tees")>=0) {
var pagenum = 1;
}
if(location.href.toLowerCa se().index Of("Traini ng")>=0) {
var pagenum = 1;
}
if(location.href.toLowerCa se().index Of("Forms" )>=0) {
var pagenum = 2;
}
if(document.createElement) window.onload = initMenu;
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(
}
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(no
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(ac
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(th
activeMenu = this;
}
return false;
}
/*function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(docum
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.getElementsByTagN
for(var n=0;n<arrNav.length;n++){
if(arrNav[n].id=="menu")
{
alert(arrNav[n].id);
//menus = getChildrenByElement(docum
menus = arrNav[n].getElementsByTag
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.toLowerCa
var pagenum = 0;
}
if(location.href.toLowerCa
var pagenum = 1;
}
if(location.href.toLowerCa
var pagenum = 1;
}
if(location.href.toLowerCa
var pagenum = 2;
}
if(document.createElement)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER