[Sandwich]

Ok, so I'm trying to get some cool drop-down menus to work here. They work just great in Firefox, but as usual, IE craps out due to it not supporting the :hover property on all elements.

So I use a workaround JavaScript, shown below. It parses through the child elements of the specified element ID (in this case, the "navigation" element), checking to see if they are LI elements. If they are, when the user mouses over one of these elements, the script adds the "over" class to that element, removing it when the mouse leaves the element. Then, in the appropriate CSS, I can apply CSS rules to both li:hover and li.over, solving the problem in IE.

Code: [Select]

<script language="JavaScript">
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("navigation");
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>
However, the script doesn't parse more than one level deep. What I want is for it to parse one more level down. Anyone here know JS enough to help out?

[Sandwich]

Ok, I brute-forced it. Does anyone know of a more elegant way?

Code: [Select]

<script language="JavaScript">
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("navigation");
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", "");
}
for (x=0; x<node.childNodes.length; x++)
{
subnode = node.childNodes[x];
if (subnode.nodeName=="UL")
{
for (y=0; y<subnode.childNodes.length; y++)
{
subsubnode = subnode.childNodes[y];
if (subsubnode.nodeName=="LI")
{
subsubnode.onmouseover=function()
{
this.className+=" over";
}
subsubnode.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
}
}
}
}
window.onload=startList;
</script>


[Kamikaze]

You could create a recursive function that goes through each level of child nodes.

Kinda like this:

Code: [Select]

define recfun(childNodes)
{
  for (i = 0; i < childNodes.length; i++)
  {
    subNode = childNodes[i];
    if (subNode.nodeName == "LI") { /* do stuff */ }
    if (subNode.childNodes.length == 0)
      continue;
    else
       recfun(subNode.childNodes);
  }
}

Note: I don't actually know the JS syntax so pardon any errors

[Descenterace]

How about using getElementsByTagName?

Code: [Select]

<script language="JavaScript">
startList = function()
{
if (document.all && document.getElementById)
{
navRoot = document.getElementById("navigation");
listNodes = navRoot.getElementsByTagName("li");
for(node in listNodes)
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
window.onload=startList;
</script>

Best thing is, that's all crossbrowser except perhaps the for(...in...) statement, which may be IE-only.

The only Javascript coding I've done is at work, for IE. So I'm not entirely sure what's part of the standard language and what's not.

Jscript and DHTML references, courtesy of MSDN. Undoubtedly the best site for this sort of stuff, but beware MS-only 'extensions' that aren't marked as such.