[SOLVED] Works in IE but not in FF

[d_barszczak]

Creating a basic tree menu script but the following won't work.

[code]
function menu(varID) {
if (document.all) {

// IE code works fine as of 17-January-2007
if (document.all(varID).style.height == "100%") {
document.all(varID).style.height="0%";
document.cookie = varID + "=closed; ";
} else {
document.all(varID).style.height="100%";
document.cookie = varID + "=opened; ";
}

} else if (document.getElementById) {

// FF code not working.
if (document.getElementById(varID).style.height == "100%") {
document.getElementById(varID).style.height="0px";
document.cookie = varID + "=closed; ";
} else {
document.getElementById(varID).style.height="0%";
document.cookie = varID + "=opened; ";
}

} else {
alert("This menu is not compatable with this browser.");
}
}
[/code]

[fenway]

See what FF returns for the height attribute; also, doesn't it have calculatedHeight, or something like that?

[nogray]

If you look over the NoGray JS library, there is a getStyle, getHeight functions that will return the current style for any element.

Just go to http://www.nogray.com for more info.

[d_barszczak]

Thank you for your help.

Im just looking through the nogray library now.

www.scripts2go.co.uk/drawingboard/menu/menu-ie.php

The above url takes you to the project im working on. If you click on Departments or Cross Curricular in ie it works but in ff it don't.

[nogray]

ok, here is an easy way to achive what you want. (I removed the cookie stuff from this function for now). Instead of using height, you can use the style property like below.
[code]
...
function menu(varID) {
if (document.getElementById(varID).style.display == "none"){
document.getElementById(varID).style.display = "";
}
else {
document.getElementById(varID).style.display = "none";
}
}
...
[/code]
[code]
...
<div id="2" on onclick="menu('2_1')"><strong><a href="#">Departments</a></strong></div>
<div id="2_1" style="display:none;">
<table width="100%" border="0">
<tr>
<td width="10">&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=english001">English</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=citizen001">Citizenship</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=found001">Foundation</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=geog001">Geography</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=hist001">History</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=ict001">ICT</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=lang001">Languages</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=maths001">Maths</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=ssci001">Social Science</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="engine.php?varDisplay=&amp;varPage=technology001">Technology</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

</table>
</div>
...
...
[/code]

[d_barszczak]

Thank you very much.

Looks like i was going about it all the wrong way.

That has been doing my head in for weeks now?