pml
03-03-2005, 08:52 PM
I am experiencing some problems with my tree menu, because the plus
signs don't change to minus signs in Firefox and Netscape. The code
works just the way I want it to in IE. I guess that Firefox and Netscape
don't support the "innerText" but I just don't know how to make the
code cross browser compatible and make it look the same as here. I
have tried to change the "innerText" to "innerHTML" instead, but that
didn't make any difference.
I hope you have one or two ideas to make the code behave the way I want.
Hope you can help me out...
<html>
<head>
<title> My incompatible tree menu </title>
<style type="text/css">
a:link{text-decoration: none; color: 004884}
a:visited{text-decoration: none; color: 004884}
a:hover{text-decoration: underline; color: 004884}
font-family: verdana;}
</style>
<script language="javascript">
//Checks if menu is collapsed or expanded and then expands or collapses accordingly.
function Toggle(which, under) {
var visible = document.getElementById (which).style.display != "none"
//This is the div that should be expanded or collapsed.
var obj = document.getElementById (which)
//This is the div that is clicked to change the plus/minus sign.
var sub1 = document.getElementById (under)
if(obj.style.display = "none") {
obj.style.display = "block"
sub1.innerText = "–"
}
if(visible) {
obj.style.display ="none"
sub1.innerText = "+"
}
}
</script>
</head>
<body>
<table border="0" cellpadding="1" cellspacing="0">
<tr><td >
<a href="javascript:Toggle('menu1', 'sub1');">
<span id="sub1">+</span><b> Menu 1</b> </a>
</td></tr>
</table>
<div id="menu1" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="javascript:Toggle('menu1.1', 'sub1_1');">
<span id="sub1_1">+</span> Submenu 1.1 </a>
</td></tr>
</table>
<div id="menu1.1" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="menunumber.asp?submenu=1.1.1" target="main">
Go to URL 1.1.1 </a>
</td></tr>
<tr><td>
<a href="menunumber.asp?submenu=1.1.2" target="main">
Go to URL 1.1.2 </a>
</td></tr>
</table>
</div>
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="javascript:Toggle('menu1.2', 'sub1_2');">
<span id="sub1_2">+</span> Submenu 1.2 </a>
</td></tr>
</table>
<div id="menu1.2" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="menunumber.asp?submenu=1.2.1" target="main">
Go to URL 1.2.1 </a>
</td></tr>
</table>
</div>
</div>
</body>
</html>
signs don't change to minus signs in Firefox and Netscape. The code
works just the way I want it to in IE. I guess that Firefox and Netscape
don't support the "innerText" but I just don't know how to make the
code cross browser compatible and make it look the same as here. I
have tried to change the "innerText" to "innerHTML" instead, but that
didn't make any difference.
I hope you have one or two ideas to make the code behave the way I want.
Hope you can help me out...
<html>
<head>
<title> My incompatible tree menu </title>
<style type="text/css">
a:link{text-decoration: none; color: 004884}
a:visited{text-decoration: none; color: 004884}
a:hover{text-decoration: underline; color: 004884}
font-family: verdana;}
</style>
<script language="javascript">
//Checks if menu is collapsed or expanded and then expands or collapses accordingly.
function Toggle(which, under) {
var visible = document.getElementById (which).style.display != "none"
//This is the div that should be expanded or collapsed.
var obj = document.getElementById (which)
//This is the div that is clicked to change the plus/minus sign.
var sub1 = document.getElementById (under)
if(obj.style.display = "none") {
obj.style.display = "block"
sub1.innerText = "–"
}
if(visible) {
obj.style.display ="none"
sub1.innerText = "+"
}
}
</script>
</head>
<body>
<table border="0" cellpadding="1" cellspacing="0">
<tr><td >
<a href="javascript:Toggle('menu1', 'sub1');">
<span id="sub1">+</span><b> Menu 1</b> </a>
</td></tr>
</table>
<div id="menu1" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="javascript:Toggle('menu1.1', 'sub1_1');">
<span id="sub1_1">+</span> Submenu 1.1 </a>
</td></tr>
</table>
<div id="menu1.1" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="menunumber.asp?submenu=1.1.1" target="main">
Go to URL 1.1.1 </a>
</td></tr>
<tr><td>
<a href="menunumber.asp?submenu=1.1.2" target="main">
Go to URL 1.1.2 </a>
</td></tr>
</table>
</div>
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="javascript:Toggle('menu1.2', 'sub1_2');">
<span id="sub1_2">+</span> Submenu 1.2 </a>
</td></tr>
</table>
<div id="menu1.2" style="display: none; margin-left: 13px;">
<table border="0" cellpadding="1" cellspacing="1">
<tr><td>
<a href="menunumber.asp?submenu=1.2.1" target="main">
Go to URL 1.2.1 </a>
</td></tr>
</table>
</div>
</div>
</body>
</html>