etaiw
01-08-2004, 03:53 PM
Hello,
I wrote some javascript to control a collapsable tree menu for webpage I am working on, and the code seems to work fine in Internet Explorer. However, the menu does not work in Netscape, Mozilla, or Safari. Do you have any ideas what could be wrong with this code such that these browsers dont understand the script? Basically the menu allows you to click on an item which opens up a submenu of links. A working version can be found using IE at www.eecs.umich.edu/grs. The code is below:
Hello,
I wrote some javascript to control a collapsable tree menu for webpage I am working on, and the code seems to work fine in Internet Explorer. However, the menu does not work in Netscape, Mozilla, or Safari. Do you have any ideas what could be wrong with this code such that these browsers dont understand the script? Basically the menu allows you to click on an item which opens up a submenu of links. A working version can be found using IE at www.eecs.umich.edu/grs. The code is below:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleBlue2.css">
<title>Outline Example in DHTML</title>
<style>
SPAN {cursor: hand ; }
.onme1 {color: gray ; }
.offme{color: #E6E6F2 ; }
</STYLE>
</head>
<body>
<table width=718 border=0 align=center><tr><td width="710">
<h3><font face="Arial,Helvetica"><big>Menu</big></font></h3>
<div id=NavBar>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" class="Outline" id="Out1" style="cursor: hand" width="16" height="16"> Group
Information</a><br></font>
<div id=Out1d style="display:None">
<a href="main.htm" target=main>:: Main</a><br>
<a href="people.htm" target=main>:: People</a><br>
<a href="pubs.htm" target=main>:: Publications</a><br>
<a href="contact.htm" target=main>:: Contact Information</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out2" class="Outline" style="cursor: hand" width="16" height="16"> Projects<br></font>
<div id=NavBar>
<div id=Out2d style="display:None">
<a href="projects.htm" target="main">:: Project
Listing</a><br>
<a href="star_light.htm" target="main">:: STAR-Light</a><br>
<a href="Rebex.htm" target="main">:: REBEX</a><br>
<a href="tmrs.htm" target="main">:: TMRS1 and TMRS2</a><br>
<a href="sat_dat.htm" target="main">:: EASE-Grid</a><br>
<a href="DS_L_band.htm" target="main">:: DSD L-Band Radiometer</a><br>
<a href="truck.htm" target="main">:: TMRS prep</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out3" class="Outline" style="cursor: hand" width="16" height="16"> More Information<br></font>
<div id=NavBar>
<div id=Out3d style="display:None">
<a href="links.htm" target=main>:: Links</a><br>
<a href="models.htm" target="main">:: Models</a><br>
<a href="RS_hydrology.htm" target="main">:: Remote
Sensing for Hydrology</a><br>
<a href="history.htm" target=main>:: Radiation Lab History</a><br>
</div></td></tr></table>
<script language="JavaScript">
function clickHandler() {
var targetId, srcElement, targetElement ;
el = window.event.srcElement;
if (el.className == "Outline") {
targetId = el.id + "d" ;
targetElement = document.all(targetId) ;
if (targetElement.style.display == "none") {
targetElement.style.display = "" ;
el.src = "images/d_arrow.gif" ;
} else {
targetElement.style.display = "none" ;
el.src = "images/r_arrow.gif" ;
}
}
}
function getonme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "onme1" ;
}
if (el.getAttribute("litUp2") != null) {
el.className = "onme2" ;
}
}
function getoffme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "offme";
}
if (el.getAttribute("litUp2") != null) {
el.className = "offme";
}
}
document.onclick = clickHandler ;
document.onmouseover = getonme ;
document.onmouseout = getoffme ;
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleBlue2.css">
<title>Outline Example in DHTML</title>
<style>
SPAN {cursor: hand ; }
.onme1 {color: gray ; }
.offme{color: #E6E6F2 ; }
</STYLE>
</head>
<body>
<table width=718 border=0 align=center><tr><td width="710">
<h3><font face="Arial,Helvetica"><big>Menu</big></font></h3>
<div id=NavBar>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" class="Outline" id="Out1" style="cursor: hand" width="16" height="16"> Group
Information</a><br></font>
<div id=Out1d style="display:None">
<a href="main.htm" target=main>:: Main</a><br>
<a href="people.htm" target=main>:: People</a><br>
<a href="pubs.htm" target=main>:: Publications</a><br>
<a href="contact.htm" target=main>:: Contact Information</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out2" class="Outline" style="cursor: hand" width="16" height="16"> Projects<br></font>
<div id=NavBar>
<div id=Out2d style="display:None">
<a href="projects.htm" target="main">:: Project
Listing</a><br>
<a href="star_light.htm" target="main">:: STAR-Light</a><br>
<a href="Rebex.htm" target="main">:: REBEX</a><br>
<a href="tmrs.htm" target="main">:: TMRS1 and TMRS2</a><br>
<a href="sat_dat.htm" target="main">:: EASE-Grid</a><br>
<a href="DS_L_band.htm" target="main">:: DSD L-Band Radiometer</a><br>
<a href="truck.htm" target="main">:: TMRS prep</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out3" class="Outline" style="cursor: hand" width="16" height="16"> More Information<br></font>
<div id=NavBar>
<div id=Out3d style="display:None">
<a href="links.htm" target=main>:: Links</a><br>
<a href="models.htm" target="main">:: Models</a><br>
<a href="RS_hydrology.htm" target="main">:: Remote
Sensing for Hydrology</a><br>
<a href="history.htm" target=main>:: Radiation Lab History</a><br>
</div></td></tr></table>
<script language="JavaScript">
function clickHandler() {
var targetId, srcElement, targetElement ;
el = window.event.srcElement;
if (el.className == "Outline") {
targetId = el.id + "d" ;
targetElement = document.all(targetId) ;
if (targetElement.style.display == "none") {
targetElement.style.display = "" ;
el.src = "images/d_arrow.gif" ;
} else {
targetElement.style.display = "none" ;
el.src = "images/r_arrow.gif" ;
}
}
}
function getonme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "onme1" ;
}
if (el.getAttribute("litUp2") != null) {
el.className = "onme2" ;
}
}
function getoffme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "offme";
}
if (el.getAttribute("litUp2") != null) {
el.className = "offme";
}
}
document.onclick = clickHandler ;
document.onmouseover = getonme ;
document.onmouseout = getoffme ;
</script>
</body>
</html>
I wrote some javascript to control a collapsable tree menu for webpage I am working on, and the code seems to work fine in Internet Explorer. However, the menu does not work in Netscape, Mozilla, or Safari. Do you have any ideas what could be wrong with this code such that these browsers dont understand the script? Basically the menu allows you to click on an item which opens up a submenu of links. A working version can be found using IE at www.eecs.umich.edu/grs. The code is below:
Hello,
I wrote some javascript to control a collapsable tree menu for webpage I am working on, and the code seems to work fine in Internet Explorer. However, the menu does not work in Netscape, Mozilla, or Safari. Do you have any ideas what could be wrong with this code such that these browsers dont understand the script? Basically the menu allows you to click on an item which opens up a submenu of links. A working version can be found using IE at www.eecs.umich.edu/grs. The code is below:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleBlue2.css">
<title>Outline Example in DHTML</title>
<style>
SPAN {cursor: hand ; }
.onme1 {color: gray ; }
.offme{color: #E6E6F2 ; }
</STYLE>
</head>
<body>
<table width=718 border=0 align=center><tr><td width="710">
<h3><font face="Arial,Helvetica"><big>Menu</big></font></h3>
<div id=NavBar>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" class="Outline" id="Out1" style="cursor: hand" width="16" height="16"> Group
Information</a><br></font>
<div id=Out1d style="display:None">
<a href="main.htm" target=main>:: Main</a><br>
<a href="people.htm" target=main>:: People</a><br>
<a href="pubs.htm" target=main>:: Publications</a><br>
<a href="contact.htm" target=main>:: Contact Information</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out2" class="Outline" style="cursor: hand" width="16" height="16"> Projects<br></font>
<div id=NavBar>
<div id=Out2d style="display:None">
<a href="projects.htm" target="main">:: Project
Listing</a><br>
<a href="star_light.htm" target="main">:: STAR-Light</a><br>
<a href="Rebex.htm" target="main">:: REBEX</a><br>
<a href="tmrs.htm" target="main">:: TMRS1 and TMRS2</a><br>
<a href="sat_dat.htm" target="main">:: EASE-Grid</a><br>
<a href="DS_L_band.htm" target="main">:: DSD L-Band Radiometer</a><br>
<a href="truck.htm" target="main">:: TMRS prep</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out3" class="Outline" style="cursor: hand" width="16" height="16"> More Information<br></font>
<div id=NavBar>
<div id=Out3d style="display:None">
<a href="links.htm" target=main>:: Links</a><br>
<a href="models.htm" target="main">:: Models</a><br>
<a href="RS_hydrology.htm" target="main">:: Remote
Sensing for Hydrology</a><br>
<a href="history.htm" target=main>:: Radiation Lab History</a><br>
</div></td></tr></table>
<script language="JavaScript">
function clickHandler() {
var targetId, srcElement, targetElement ;
el = window.event.srcElement;
if (el.className == "Outline") {
targetId = el.id + "d" ;
targetElement = document.all(targetId) ;
if (targetElement.style.display == "none") {
targetElement.style.display = "" ;
el.src = "images/d_arrow.gif" ;
} else {
targetElement.style.display = "none" ;
el.src = "images/r_arrow.gif" ;
}
}
}
function getonme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "onme1" ;
}
if (el.getAttribute("litUp2") != null) {
el.className = "onme2" ;
}
}
function getoffme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "offme";
}
if (el.getAttribute("litUp2") != null) {
el.className = "offme";
}
}
document.onclick = clickHandler ;
document.onmouseover = getonme ;
document.onmouseout = getoffme ;
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleBlue2.css">
<title>Outline Example in DHTML</title>
<style>
SPAN {cursor: hand ; }
.onme1 {color: gray ; }
.offme{color: #E6E6F2 ; }
</STYLE>
</head>
<body>
<table width=718 border=0 align=center><tr><td width="710">
<h3><font face="Arial,Helvetica"><big>Menu</big></font></h3>
<div id=NavBar>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" class="Outline" id="Out1" style="cursor: hand" width="16" height="16"> Group
Information</a><br></font>
<div id=Out1d style="display:None">
<a href="main.htm" target=main>:: Main</a><br>
<a href="people.htm" target=main>:: People</a><br>
<a href="pubs.htm" target=main>:: Publications</a><br>
<a href="contact.htm" target=main>:: Contact Information</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out2" class="Outline" style="cursor: hand" width="16" height="16"> Projects<br></font>
<div id=NavBar>
<div id=Out2d style="display:None">
<a href="projects.htm" target="main">:: Project
Listing</a><br>
<a href="star_light.htm" target="main">:: STAR-Light</a><br>
<a href="Rebex.htm" target="main">:: REBEX</a><br>
<a href="tmrs.htm" target="main">:: TMRS1 and TMRS2</a><br>
<a href="sat_dat.htm" target="main">:: EASE-Grid</a><br>
<a href="DS_L_band.htm" target="main">:: DSD L-Band Radiometer</a><br>
<a href="truck.htm" target="main">:: TMRS prep</a><br>
</div>
<font size=4 color=#212F67>
<img src="images/r_arrow.gif" id="Out3" class="Outline" style="cursor: hand" width="16" height="16"> More Information<br></font>
<div id=NavBar>
<div id=Out3d style="display:None">
<a href="links.htm" target=main>:: Links</a><br>
<a href="models.htm" target="main">:: Models</a><br>
<a href="RS_hydrology.htm" target="main">:: Remote
Sensing for Hydrology</a><br>
<a href="history.htm" target=main>:: Radiation Lab History</a><br>
</div></td></tr></table>
<script language="JavaScript">
function clickHandler() {
var targetId, srcElement, targetElement ;
el = window.event.srcElement;
if (el.className == "Outline") {
targetId = el.id + "d" ;
targetElement = document.all(targetId) ;
if (targetElement.style.display == "none") {
targetElement.style.display = "" ;
el.src = "images/d_arrow.gif" ;
} else {
targetElement.style.display = "none" ;
el.src = "images/r_arrow.gif" ;
}
}
}
function getonme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "onme1" ;
}
if (el.getAttribute("litUp2") != null) {
el.className = "onme2" ;
}
}
function getoffme() {
el = event.srcElement ;
if (el.getAttribute("litUp1") != null) {
el.className = "offme";
}
if (el.getAttribute("litUp2") != null) {
el.className = "offme";
}
}
document.onclick = clickHandler ;
document.onmouseover = getonme ;
document.onmouseout = getoffme ;
</script>
</body>
</html>