doctype & getElementById in Firefox

by **jbunnell** on Fri Apr 11, 2008 5:09 am

I am having a problem with my javascript functions that display pop-up menus on mouse rollover which use document.getElementById(). The page views perfectly in IE with the doctype, and perfectly in Firefox without the doctype. What do I need to do to my code to make this work right in both browsers including the doctype?

These are the functions that take care of displaying and removing that popup menus:

var menus = new Array(3);
menus = ['maintenance', 'rudiments', 'percussion'];
function showMenu(id){
clearMenus();
document.getElementById(id).style.zIndex="1";
}
function removeMenu(id){
document.getElementById(id).style.zIndex="-1";
}
function clearMenus(){
for(var i=0; i<menus.length; i++){
var menu = document.getElementById(menus[i]);
if(menu.style.zIndex=="1"){
removeMenu(menus[i]);
}
}
}

In my html document, I am using:

<!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" xml:lang="en" lang="en">

This works perfectly in IE, but in Firefox the popup menus don't display. When I remove the doctype, it works perfectly in Firefox, but completely throws everything off in IE. Firefox debugger says that every time getElementById() is called it has no properties, although I know my id names are correct on my div tags in my html document. How do I fix this?

by **rangana** on Fri Apr 11, 2008 6:51 am

Can we see the rest of the code...or even a snippet that would reproduce this problem

...We're unaware what id could accept in showMenu function

by **jbunnell** on Sat Apr 12, 2008 1:51 am

This is 'jsFunction.js':


var menus = new Array(3);
menus = ["maintenance", "rudiments", "percussion"];
function showMenu(id){
clearMenus();
document.getElementById(id).style.zIndex="1";
}
function removeMenu(id){
document.getElementById(id).style.zIndex="-1";
}
function clearMenus(){
for(var i=0; i<menus.length; i++){
var menu = document.getElementById(menus[i]);
if(menu.style.zIndex=="1"){
removeMenu(menus[i]);
}
}
}


function underline(id){
document.getElementById(id).style.textDecoration="underline";
}
function removeUnderline(id){
document.getElementById(id).style.textDecoration="none";
}


function highlight(cellId, fontId){
document.getElementById(cellId).style.backgroundColor="#ffff99";
document.getElementById(fontId).style.color="black";
}
function unhighlight(cellId, fontId){
document.getElementById(cellId).style.backgroundColor="green";
document.getElementById(fontId).style.color="#ffff99";
}

Here is my html document:

<!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" xml:lang="en" lang="en">
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="jsFunctions.js" language="javascript" type="text/javascript"></script>
</head>

<body>


<div id="content" class="content" onmousedown="clearMenus();" onmouseup="clearMenus();">
<h1>Choosing Your Drum Kit</h1>
</div>


<div id="maintenance" class="maintenance">
<table align="left" border="0" cellpadding="2" cellspacing="1" bgcolor="green">
<tr><td id="m1" onmouseover="highlight('m1', 'mf1');" onmouseout="unhighlight('m1', 'mf1');">
<a href=""><font id="mf1">tuning</font></a></td>
</tr>
<tr><td id="m2" onmouseover="highlight('m2', 'mf2');" onmouseout="unhighlight('m2', 'mf2');">
<a href=""><font id="mf2">set up your kit</font></a></td>
</tr>
<tr><td id="m3" onmouseover="highlight('m3', 'mf3');" onmouseout="unhighlight('m3', 'mf3');">
<a href=""><font id="mf3">prepare</font></a></td>
</tr>
<tr>
<td height="85"></td>
</tr>
</table>
</div>


<div id="rudiments" class="rudiments">
<table align="left" border="0" cellpadding="2" cellspacing="1" bgcolor="green">
<tr>
<td id="r1" onmouseover="highlight('r1', 'rf1');" onmouseout="unhighlight('r1', 'rf1');">
<a href=""><font id="rf1">Advanced</font></a>
</td>
</tr>
<tr>
<td id="r2" onmouseover="highlight('r2', 'rf2');" onmouseout="unhighlight('r2', 'rf2');">
<a href=""><font id="rf2">Intermediate</font></a>
</td>
</tr>
<tr>
<td id="r3" onmouseover="highlight('r3', 'rf3');" onmouseout="unhighlight('r3', 'rf3');">
<a href=""><font id="rf3">Beginner</font></a>
</td>
</tr>
<tr>
<td height="85"></td>
</tr>
</table>
</div>


<div id="percussion" class="percussion">
<table align="left" border="0" cellpadding="2" cellspacing="1" bgcolor="green">
<tr>
<td id="p1" onmouseover="highlight('p1', 'pf1');" onmouseout="unhighlight('p1', 'pf1');">
<a href="aux/bells.html"><font id="pf1">bells & xylos</font></a>
</td>
</tr>
<tr>
<td id="p2" onmouseover="highlight('p2', 'pf2');" onmouseout="unhighlight('p2', 'pf2');">
<a href="aux/concertstuff.html"><font id="pf2">concert stuff</font></a>
</td>
</tr>
<tr>
<td id="p3" onmouseover="highlight('p3', 'pf3');" onmouseout="unhighlight('p3', 'pf3');">
<a href="aux/beginner.html"><font id="pf3">Beginner</font></a>
</td>
</tr>
<tr>
<td height="85"></td>
</tr>
</table>
</div>


<div class="foot">
<hr>
<table width="700">
<tr align="center">
<td><a href="choose.html" name="choose"
onmouseover="underline('choose');clearMenus();"
onmouseout="removeUnderline('choose');">
<font id="choose">Choosing a Drum Kit</font></a>
</td>
<td><a href="maintenance.html" name="maintenance"
onmouseover="underline('tuning');showMenu('maintenance');"
onmouseout="removeUnderline('tuning');">
<font id="tuning">Tuning & Maintenance</font></a>
</td>
<td><a href="technique.html" name="technique"
onmouseover="underline('technique');clearMenus();"
onmouseout="removeUnderline('technique');">
<font id="technique">Proper Sticking & Technique</font></a>
</td>
<td><a href="rudiments.html" name="rudiments"
onmouseover="underline('beats');showMenu('rudiments');"
onmouseout="removeUnderline('beats');">
<font id="beats">Rudiments & Drum Beats</font></a>
</td>
<td><a href="percussion.html" name="percussion"
onmouseover="underline('aux');showMenu('percussion');"
onmouseout="removeUnderline('aux');">
<font id="aux">Auxiliary Percussion</font></a>
</td>
<td><a href="expand.html" name="expand"
onmouseover="underline('expand');clearMenus();"
onmouseout="removeUnderline('expand');">
<font id="expand">Expand Your Style</font></a>
</td>
</tr>
</table>
<hr>
<div>

</body>
</html>

Here is my css file:

.content{
position:absolute;
top:0px;
left:0px;
bottom:88px;
background-color:#ffff99;
width:100%;
z-index:0;
overflow:auto;
}
.maintenance{
font:9pt "Arial";
position:fixed;
left:125px;
bottom:0px;
z-index:-1;
}
.rudiments{
font:9pt "Arial";
position:fixed;
left:385px;
bottom:0px;
z-index:-100;
}
.percussion{
font:9pt "Arial";
position:fixed;
left:507px;
bottom:0px;
z-index:-100;
}
.foot {
position:fixed;
left:0px;
bottom:0px;
padding:0;
border-top:1;
background-color:green;
width:100%;
height:88px;
z-index:2;
}
a:link{
font:11pt "Arial";
text-decoration:none;
color:#ffff99;
}
a:visited {
font:11pt "Arial";
text-decoration:none;
color:#ffff99;
}
a:active {
font:11pt "Arial";
color:#00ff33;
}

by **rangana** on Sat Apr 12, 2008 2:10 am

For future reference, next time, do place your codes inside the [code] [/ code] tag of this forum...

...Anyway, I don't know what you are trying to achieve, See this line:
[code]
function clearMenus(){
for(var i=0; i<menus.length; i++){
var menu = document.getElementById(menus[i]);
if(menu.style.zIndex=="1"){
removeMenu(menus[i]);
}
}
}
[/code]

...This is a complete error. I don't understand what menus are you referring

...Also you might find it useful to get firebug...It makes us (web developer) easy to find the error

Hope that makes sense

by **jbunnell** on Sat Apr 12, 2008 2:29 am

menus is a string array that is set up at the very beginning of the javascript file... it contains 3 strings, each of which are the ids for my div tags that contain the popup menus. All clearMenus() does is setup a loop to go through and check whether each popup menu has a z-index of 1, and if so changes it to -1. I am positive that my javascript is correct... the entire rollover on everything works fine in firefox until I add in the doctype, then it says that getElementById has no properties every time it is called.

by **rangana** on Sat Apr 12, 2008 2:45 am

Yeah, my apologies, This is weird, you're right, the DTD creates the conflicts.

...Have you given it a try to change the DTD's?..

I also have the same problem with one of my scripts not working when the page has had DTD..but i'm certain this is not the same as yours, because I'm using ilayer on mine

...Anyway, this is'nt an intelligent suggestion, but give it a try changing DTD's. See which of which works on your script.

...All I could say is that this is a complete weird

doctype & getElementById in Firefox

doctype & getElementById in Firefox

Who is online