This JavaScript is not working in Mozilla Firefox and Google Chrome, can anyone please help me with this.. Thank you very much.. Please post your revised JavaScript if I am wrong.. please help.. thank you..

<style type="text/css"> 
a
{text-decoration: none;}
 
.title
{position: absolute;
width: 150px;
height: 20px;
left: 10=px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
 
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 0px solid black;
background-color: white;
layer-background-color: white;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
 
<SCRIPT LANGUAGE="JavaScript"> 
 
 
 
<!-- Begin
 
 
//nom is the number of menus on your tree, change this if your want more menus
var nom = 16; // Number of menus
var usePictures = 1;
 
var ttls = new Array();
var subs = new Array();
var lastn;
var lastmove;
 
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "open.gif";
}
else if (document.all) {
document.all(pic).src = "open.gif";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}
//  End -->
</script>

Please help me.. thank you very much..

Recommended Answers

All 4 Replies

document.layers? Seriously?
For your reference:
http://www.webconcerns.co.uk/javascript/dhtml/dhtml_page.asp

Try:

<style type="text/css"> 
a
{
	text-decoration: none;
}
 
.title
{
	position: absolute;
	width: 150px;
	height: 20px;
	left: 10=px;
	z-index: 10;
	font-family: verdana, helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}
 
.submenu
{
	position: absolute;
	left: 25px;
	width: 120px;
	border: 0px solid black;
	background-color: white;
	layer-background-color: white;
	font-family: verdana, helvetica, sans-serif;
	font-size: 10px;
	visibility: hidden;
}
</style>
 
<script type="text/javascript">

//nom is the number of menus on your tree, change this if your want more menus
var nom = 16; // Number of menus
var usePictures = 1;
 
var ttls = new Array();
var subs = new Array();
var lastn;
var lastmove;

/*
if (document.layers) {
	visible = 'show';
	hidden = 'hide';
}
else if (document.all) {
	visible = 'visible';
	hidden = 'hidden';
}
*/
var	visible = 'visible';
var	hidden = 'hidden';

for (var i = 1; i <= nom; i++) {
	ttls[i] = ('title' + i);
	subs[i] = ('submenu' +i);
}
function picopen(n) {
	pic = ('pic' + n);
	/*
	title = ('title' + n);
	if (document.layers) {
		document.layers[title].document.images[pic].src = "open.gif";
	}
	else if (document.all) {
		document.all(pic).src = "open.gif";
	}
	*/
	if (document.getElementById) {
		document.getElementById(pic).src = "open.gif";
	}
	else if (document.all) {
		document.all(pic).src = "open.gif";
	}

}
function picclose(n) {
	pic = ('pic' + n);
	/*
	title = ('title' + n);
	if (document.layers) {
		document.layers[title].document.images[pic].src = "closed.gif";
	}
	else if (document.all) {
		document.all(pic).src = "closed.gif";
	}
	*/
	if (document.getElementById) {
		document.getElementById(pic).src = "closed.gif";
	}
	else if (document.all) {
		document.all(pic).src = "closed.gif";
	}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
	if (n <= nom) {
		menu = ('submenu' + n);
		/*
		if (document.layers) {
			submenu = document.layers[menu];
		}
		else if (document.all) {
			submenu = document.all(menu).style;
		}
		*/
		if (document.getElementById) {
			submenu = document.getElementById(menu).style;
		}
		else if (document.all) {
			submenu = document.all(menu).style;
		}

		if (submenu.visibility == visible) {
			submenu.visibility = hidden;
			picclose(n);
			for (var i = (n+1); i <= nom; i++) {
				/*
				if (document.layers) {
					document.layers[ttls[i]].top -= move;
					document.layers[subs[i]].top -= move;
				}
				else if (document.all) {
					document.all(ttls[i]).style.pixelTop -= move;
					document.all(subs[i]).style.pixelTop -= move;
				}
				*/
				if (document.getElementById) {
					document.getElementById(ttls[i]).style.top -= move;
					document.getElementById(subs[i]).style.top -= move;
				}
				else if (document.all) {
					document.all(ttls[i]).style.pixelTop -= move;
					document.all(subs[i]).style.pixelTop -= move;
				}

			}
		}
	}
}

function toggle(n,move) {
	menu = ('submenu' + n);
	/*
	if (document.layers) {
		submenu = document.layers[menu];
	}
	else if (document.all) {
		submenu = document.all(menu).style;
	}
	*/
	if (document.getElementById) {
		submenu = document.getElementById(menu).style;
	}
	else if (document.all) {
		submenu = document.all(menu).style;
	}

	if (submenu.visibility == visible) {
		submenu.visibility = hidden;
		if (usePictures) picclose(n);
		for (var i = (n+1); i <= nom; i++) {
			/*
			if (document.layers) {
				document.layers[ttls[i]].top -= move;
				document.layers[subs[i]].top -= move;
			}
			else if (document.all) {
				document.all(ttls[i]).style.pixelTop -= move;
				document.all(subs[i]).style.pixelTop -= move;
			}
			*/
			if (document.getElementById) {
				document.getElementById(ttls[i]).style.top -= move;
				document.getElementById(subs[i]).style.top -= move;
			}
			else if (document.all) {
				document.all(ttls[i]).style.pixelTop -= move;
				document.all(subs[i]).style.pixelTop -= move;
			}
		}
	}
	else {
		submenu.visibility = visible;
		if (usePictures) picopen(n);
		if (lastn != n) {
			lasttoggle(lastn,lastmove);
		}
		for (var i = (n+1); i <= nom; i++) {
			/*
			if (document.layers) {
				document.layers[ttls[i]].top += move;
				document.layers[subs[i]].top += move;
			}
			if (document.all) {
				document.all(ttls[i]).style.pixelTop += move;
				document.all(subs[i]).style.pixelTop += move;
			}
			*/
			if (document.getElementById) {
				document.getElementById(ttls[i]).style.top += move;
				document.getElementByIdsubs[i]).style.top += move;
			}
			if (document.all) {
				document.all(ttls[i]).style.pixelTop += move;
				document.all(subs[i]).style.pixelTop += move;
			}

		}
	}
lastn = n;
lastmove = move;
}
</script>

Thank you for sharing your codes, I tried it and it's not working..

Please everybody, help me.. Thank you so much..

post your html code (and css if any)

<!--

<html>

<head>

<title>Test Tree</title>

 

</head>

<body>

</body>

</html>

-->

 

<html>

 

<head>

 

<title>Test Tree</title>

 

<style type="text/css"> 



a

{text-decoration: none;}

 

.title

{position: absolute;

left: 35px;

width: 150px;

height: 20px;

z-index: 10;

font-family: verdana, helvetica, sans-serif;

font-weight: bold;

font-size: 12px;}

 

.submenu

{position: absolute;

left: 40px;

width: 120px;

border: 0px solid black;

background-color: white;

layer-background-color: white;

font-family: verdana, helvetica, sans-serif;

font-size: 10px;

visibility: hidden;}

</style>

 

<SCRIPT LANGUAGE="JavaScript">  

//nom is the number of menus on your tree, change this if your want more menus

var nom = 16; // Number of menus

var usePictures = 1;

 

var ttls = new Array();

var subs = new Array();

var lastn;

var lastmove;

 

if (document.layers) {

visible = 'show';

hidden = 'hide';

}

else

if (document.all) {

visible = 'visible';

hidden = 'hidden';

}

for (var i = 1; i <= nom; i++) {

ttls[i] = ('title' + i);

subs[i] = ('submenu' +i);

}

function picopen(n) {

title = ('title' + n);

pic = ('pic' + n);

if (document.layers) {

document.layers[title].document.images[pic].src = "open.gif";

}

else if (document.all) {

document.all(pic).src = "open.gif";

   }

}

function picclose(n) {

title = ('title' + n);

pic = ('pic' + n);

if (document.layers) {

document.layers[title].document.images[pic].src = "closed.gif";

}

else if (document.all) {

document.all(pic).src = "closed.gif";

   }

}

lastn = (nom + 1);

lastmove = 0;

function lasttoggle(n,move) {

if (n <= nom) {

menu = ('submenu' + n);

if (document.layers) {

submenu = document.layers[menu];

}

else if (document.all) {

submenu = document.all(menu).style;

}

if (submenu.visibility == visible) {

submenu.visibility = hidden;

picclose(n);

for (var i = (n+1); i <= nom; i++) {

if (document.layers) {

document.layers[ttls[i]].top -= move;

document.layers[subs[i]].top -= move;

}

else if (document.all) {

document.all(ttls[i]).style.pixelTop -= move;

document.all(subs[i]).style.pixelTop -= move;

            }

         }

      }

   }

}

function toggle(n,move) {

menu = ('submenu' + n);

if (document.layers) {

submenu = document.layers[menu];

}

else if (document.all) {

submenu = document.all(menu).style;

}

if (submenu.visibility == visible) {

submenu.visibility = hidden;

if (usePictures) picclose(n);

for (var i = (n+1); i <= nom; i++) {

if (document.layers) {

document.layers[ttls[i]].top -= move;

document.layers[subs[i]].top -= move;

}

else if (document.all) {

document.all(ttls[i]).style.pixelTop -= move;

document.all(subs[i]).style.pixelTop -= move;

      }

   }

}

else {

submenu.visibility = visible;

if (usePictures) picopen(n);

if (lastn != n) {

lasttoggle(lastn,lastmove);

}

for (var i = (n+1); i <= nom; i++) {

if (document.layers) {

document.layers[ttls[i]].top += move;

document.layers[subs[i]].top += move;

}

if (document.all) {

document.all(ttls[i]).style.pixelTop += move;

document.all(subs[i]).style.pixelTop += move;

      }

   }

}

lastn = n;

lastmove = move;

} 





</script>

 

</head>

 

<body>

   

<!--

<body bgColor="#FFFF00">

 

<div id="shape1" style="position:absolute; overflow:hidden; left:3px; top:4px; width:1335px; height:545px; z-index:0"><img border=0 alt="" src="file:///C:/Users/ROBLEI~1/AppData/Local/Temp/Web Page Maker/docO72VU/shapeLOULE.gif"></div>

 

<div id="image1" style="position:absolute; overflow:hidden; left:8px; top:10px; width:150px; height:90px; z-index:1"><img src="file:///C:/Users/ROBLEI~1/AppData/Local/Temp/Web Page Maker/docO72VU/imgONR3C.jpg" alt="" border=0 width=150 height=100></div>

-->



<div id="iFrame1" style="position:absolute; left:162px; top:12px; z-index:0">

<iframe name="iFrame1" width="1100" height="550" src="http://yahoo.com" scrolling="yes" frameborder="0"></iframe>

</div>

 

 

 

 

<div class="title" id="title1" style="top: 120px"> 

 <a href="#" onclick="javascript: toggle(1,60); return false"><img name="pic1" src="closed.gif" border="0"> Browser TS</a>

</div>

 

 <div class="submenu" id="submenu1" style="top: 140px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com" target="iFrame1">Clear Cache</a><br>

   <img src="line.gif" border="0"><a href="http://www.google.com" target="iFrame1">Add-Ons</a><br>

   <img src="line.gif" border="0"><a href="http://www.youtube.com" target="iFrame1">JavaScript</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Downloads</a>

 </div>

 

<div class="title" id="title2" style="top: 140px"> 

 <a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="closed.gif" border="0"> Contact Us</a>

</div>

 

 <div class="submenu" id="submenu2" style="top: 160px">

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Yahoo Help</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Yahoo Help</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Yahoo Help</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Yahoo Help</a>

 </div>

 

<div class="title" id="title3" style="top: 160px"> 

 <a href="#" onclick="javascript: toggle(3,120); return false"><img name="pic3" src="closed.gif" border="0"> External Mail</a>

</div>

 

 <div class="submenu" id="submenu3" style="top: 180px">

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Outlook Express</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Outlook 2002</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Outlook 2007</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Outlook 2010</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Windows Mail</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Mac Mail</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Entourage</a><br>

   <img src="line.gif" border="0"><a href="http://www.help.yahoo.com">Thunder Bird</a>

 </div>

<div class="title" id="title4" style="top: 180px"> 

 <a href="#" onclick="javascript: toggle(4,30); return false"><img name="pic4" src="closed.gif" border="0"> Hotkeys</a>

</div>

 

 <div class="submenu" id="submenu4" style="top: 200px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">KANA</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Live Person</a>

 </div>

 

<div class="title" id="title5" style="top: 200px"> 

 <a href="#" onclick="javascript: toggle(5,30); return false"><img name="pic5" src="closed.gif" border="0"> Known Issues</a>

</div>

 

 <div class="submenu" id="submenu5" style="top: 220px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com" target="iFrame1">US</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">UK</a>

 </div>

 

 

 

<div class="title" id="title6" style="top: 220px"> 

 <a href="#" onclick="javascript: toggle(6,60); return false"><img name="pic6" src="closed.gif" border="0"> Partners</a>

</div>

 

 <div class="submenu" id="submenu6" style="top: 240px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">AT&T</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">BT Internet</a><br>

  <img src="line.gif" border="0"><a href="http://www.yahoo.com">SBC</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Verizon</a>

 </div>

 

<div class="title" id="title7" style="top: 240px"> 

 <a href="#" onclick="javascript: toggle(7,45); return false"><img name="pic7" src="closed.gif" border="0"> Spiels</a>

</div>

 

 <div class="submenu" id="submenu7" style="top: 260px">

  <img src="line.gif" border="0"><a href="http://www.yahoo.com">Introduction</a><br>   

  <img src="line.gif" border="0"><a href="http://www.yahoo.com">Empthaty</a><br>

  <img src="line.gif" border="0"><a href="http://www.yahoo.com">Closing</a>

 </div>

 

<div class="title" id="title8" style="top: 260px"> 

 <a href="#" onclick="javascript: toggle(8,60); return false"><img name="pic8" src="closed.gif" border="0"> Search Engine</a>

</div>

 

 <div class="submenu" id="submenu8" style="top: 280px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Bing Search</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google Search</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Wikipedia Search</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Yahoo! Search</a>

 </div>

 

<div class="title" id="title9" style="top: 280px"> 

 <a href="#" onclick="javascript: toggle(9,105); return false"><img name="pic9" src="closed.gif" border="0"> Web Tools</a>

</div>

 

 <div class="submenu" id="submenu9" style="top: 300px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">AMT</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">CC Tool</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">PIM Tool</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Yahoo! Blog</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Yahoo! Help</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Time Coverter</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Zen Support</a>

 </div>

 

<div class="title" id="title10" style="top: 300px"> 

 <a href="#" onclick="javascript: toggle(10,75); return false"><img name="pic10" src="closed.gif" border="0"> 3rd Party</a>

</div>

 

 <div class="submenu" id="submenu10" style="top: 320px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Microsoft</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">True Switch</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

 

<div class="title" id="title11" style="top: 320px"> 

 <a href="#" onclick="javascript: toggle(11,45); return false"><img name="pic11" src="closed.gif" border="0"> Robert</a>

</div>

 

 <div class="submenu" id="submenu11" style="top: 340px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

 

<div class="title" id="title12" style="top: 340px"> 

 <a href="#" onclick="javascript: toggle(12,60); return false"><img name="pic12" src="closed.gif" border="0"> Norman</a>

</div>

 

 <div class="submenu" id="submenu12" style="top: 360px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">True Switch</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

<div class="title" id="title13" style="top: 360px"> 

 <a href="#" onclick="javascript: toggle(13,30); return false"><img name="pic13" src="closed.gif" border="0"> Frences</a>

</div>

 

 <div class="submenu" id="submenu13" style="top: 380px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

 

<div class="title" id="title14" style="top: 380px"> 

 <a href="#" onclick="javascript: toggle(14,60); return false"><img name="pic14" src="closed.gif" border="0"> Jonathan</a>

</div>

 

 <div class="submenu" id="submenu14" style="top: 400px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">True Switch</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

 

<div class="title" id="title15" style="top: 400px"> 

 <a href="#" onclick="javascript: toggle(15,45); return false"><img name="pic15" src="closed.gif" border="0"> Bad Vibes</a>

</div>

 

 <div class="submenu" id="submenu15" style="top: 420px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Google</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">Manufacturer</a>

 </div>

 

<div class="title" id="title16" style="top: 420px"> 

 <a href="#" onclick="javascript: toggle(16,60); return false"><img name="pic16" src="closed.gif" border="0"> Social Networking</a>

</div>

 

 <div class="submenu" id="submenu16" style="top: 440px">

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Friendster</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Facebook</a><br>

   <img src="line.gif" border="0"><a href="http://www.yahoo.com">Twitter</a><br>

   <img src="line.gif" border="0"><a href="http://www.lycos.com">My Space</a>

 </div>

</body>

</html>

'

That's the code. Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.