Hi,
I am currently maintaining a website containing a left menu with a complicated script managing the appearence of nodes, subnodes, etc...
This works fine under IE but not under FireFox.
Basically The code is made of :
HTML nodes :
e.g. the following code manages a part of the menu that is :
-- "Presse"
-------- "Communiqués"
-------- "Publications"
When you click on "presse", Communiqués and Publications show up under the upper node.
<div id='menuItem1066' exc='False'>
<div>
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';">
<td width="15" onClick="displayMenuItem(1066)"><img src="/bepImages/plus_tcm25-3188.gif" width="15" height="16"></td>
<td>
<a href="/presse/index.asp" target="_self" class="link_menu" id="menuLeaf4712">Presse</a>
</td>
</tr>
</table>
</div>
<div style="display:none">
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';" onClick="undisplayMenuItem(1066)">
<td width="15" ><img src="/bepImages/minus_tcm25-3187.gif" width="15" height="16"></td>
</td>
<td>
<a href="/presse/index.asp" target="_self" class="link_menu" id="menuLeaf4712_collapsed">Presse</a>
</td>
</tr>
</table>
<div id='menuItem1067' exc='False'>
<div>
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';">
<td width="5"> </td>
<td width="15"><img src="/bepImages/vide_tcm25-4140.gif" width="15" height="16" style="visibility:hidden"></td>
<td>
<a href="/presse/cp/communiques.asp" target="_self" class="link_menu" id="menuLeaf4699">Communiqués</a>
</td>
</tr>
</table>
</div>
<div style="display:none">
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';" onClick="undisplayMenuItem(1067)">
<td width="5"> </td>
<td width="15"><img src="/bepImages/vide_tcm25-4140.gif" width="15" height="16" style="visibility:hidden"></td>
</td>
<td>
<a href="/presse/cp/communiques.asp" target="_self" class="link_menu" id="menuLeaf4699_collapsed">Communiqués</a>
</td>
</tr>
</table>
</div>
</div>
<div id='menuItem1069' exc='False'>
<div>
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';">
<td width="5"> </td>
<td width="15"><img src="/bepImages/vide_tcm25-4140.gif" width="15" height="16" style="visibility:hidden"></td>
<td>
<a href="/presse/publications/index.asp" target="_self" class="link_menu" id="menuLeaf4716">Publications</a>
</td>
</tr>
</table>
</div>
<div style="display:none">
<table width="100%" border="0" bgcolor="#026C3D" cellspacing="0" cellpadding="1">
<tr onMouseOver="this.style.cursor='pointer';" onClick="undisplayMenuItem(1069)">
<td width="5"> </td>
<td width="15"><img src="/bepImages/vide_tcm25-4140.gif" width="15" height="16" style="visibility:hidden"></td>
</td>
<td>
<a href="/presse/publications/index.asp" target="_self" class="link_menu" id="menuLeaf4716_collapsed">Publications</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Then there is a javascript code managing all this :
<script type="text/javaScript">
function setStyleClass(id, cls)
{
var elm = document.getElementById(id);
if(elm)
{
elm.className = cls;
}
}
function displayMenuItem(id, leafId)
{
if(leafId)
{
setStyleClass("menuLeaf" + leafId, "menuHighlight");
setStyleClass("menuLeaf" + leafId + "_collapsed", "menuHighlight");
}
var wrapper = document.getElementById("menuItem" + id);
if(wrapper){
wrapper.children[0].style.display="none";
wrapper.children[1].style.display="block";
// walk up doc tree to display parent menu items
var parentElement = wrapper.parentElement;
while(parentElement)
{
if(parentElement.id != null)
{
if(parentElement.id.substring(0,8) == "menuItem")
{
parentElement.children[0].style.display="none";
parentElement.children[1].style.display="block";
}
}
parentElement = parentElement.parentElement;
}
}
}
function undisplayMenuItem(id)
{
var wrapper = document.getElementById("menuItem" +
id);
wrapper.children[0].style.display="block";
wrapper.children[1].style.display="none";
//undisplay all child menu items
var childMenuItems =
wrapper.getElementsByTagName("DIV");
for(var i in childMenuItems)
{
var childMenuItem = childMenuItems[i];
if(childMenuItem.id != null)
{
if(childMenuItem.id.substring(0,8) ==
"menuItem")
{
childMenuItem.children[0].style.display="block";
childMenuItem.children[1].style.display="none";
}
}
}
}
</script>
A friend told me that "children[0]" was not crossbrowser stuff but was IE only.
So I replaced it with "childNodes" (and I changed parentElement => parentNode too) but it does not fix my problem.
Apprently the childNodes don't always have a "style" attribute under FireFox.
Does anyone have an idea please ?
Thanks in advance,
Peatch
