Javascript for hover menu using class rather than ID

[Latch]

Hi I am trying to create a hover menu that is split on the page with an iframe between. I was trying to do it via <ul id but was told to use <ul class and change the #dmenu to .dmenu ofk I did this and the split has ocurred but now the hover has stuffed up. do I need to do something to my javascript as well?

[webmasterworld.com...]
This is where i was told to change from id to class.

cheers

<SCRIPT LANGUAGE="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("dmenu");
for (i=0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

window.onload=startList;
//-->
</SCRIPT>

[Moby_Dim]

Sure. You have document.getElementById("dmenu") but since you've shifted to classes, you have not menu ID attribute at all. Assign unique IDs to both menus and enhance the function so it works for both menus.

[Latch]

thanls for the reply Moby_Dim but I'm not really sure how to do this.

[Moby_Dim]

<script language="JavaScript" type="text/javascript">
<!--
//suppose you've assigned both IDs, e.g. "menu_top" and "menu_bottom"
startList = function() {
if (document.all&&document.getElementById) {
//a small array :
var menus = new Array('menu_top','menu_bottom');
//now do what you need for both menus :
for(var acounter = 0; acounter < menus.length; acounter++) {
navRoot = document.getElementById(menus[acounter]);
for (i=0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
}
window.onload=startList;
//-->
</script>

[Moby_Dim]

The only thing I have not realized is : what the need for

if(document.all&&document.getElementById) condition?

i'd use document.getElementById only. Or you want this not to work in ffox?

[Latch]

Thanks Moby_dim

[Moby_Dim]

One more tip : use var for local variables

e.g. NOT for (i=0; i < navRoot.childNodes.length; i++)

but : for (var i=0; i < navRoot.childNodes.length; i++)

This makes your counter really local.

[Moby_Dim]

And one more for better optimization ;)

Make cached values.

instead of
for (i=0; i < navRoot.childNodes.length; i++)

better :

var nodesNumber = navRoot.childNodes.length;
for (var i=0; i < nodesNumber; i++)

Hope this helps to create one more cool service ;)

p.s. try and let me know whether it works. i have not tested actually

[Sathallrin]

The only thing I have not realized is : what the need for

if(document.all&&document.getElementById) condition?

i'd use document.getElementById only. Or you want this not to work in ffox?

The reason it checks for document.all is this script is only needed in IE. This script basically allows IE to fake the css hover method on other elements besides anchors, so it is not required in browsers where the hover method works on all elements.

[rocknbil]

^ ^ ^ I.E. 4.0 or less actually, later versions of IE support document.getElementByID.

[Sathallrin]

Correct Rocknbil, which is why it checks for both document.all and document.getElementByID.
The document.all checks to see if it is IE (since mozilla based brosers do not have this). And document.getElementByID checks to see if it is a new enough version of IE to use that call, since the call is used in the function.