Hard Light Productions Forums

Off-Topic Discussion => General Discussion => Topic started by: Sandwich on July 22, 2006, 10:31:04 am

Title: Need some JavaScript Help for HLP
Post by: Sandwich on July 22, 2006, 10:31:04 am

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?

Title: Re: Need some JavaScript Help for HLP
Post by: Sandwich on July 22, 2006, 10:45:06 am

Ok, I brute-forced it. :p 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>


Title: Re: Need some JavaScript Help for HLP
Post by: Kamikaze on July 22, 2006, 02:22:24 pm

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

Title: Re: Need some JavaScript Help for HLP
Post by: Descenterace on July 23, 2006, 05:03:37 am

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 (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/29f83a2c-48c5-49e2-9ae0-7371d2cda2ff.asp) and DHTML (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp) references, courtesy of MSDN. Undoubtedly the best site for this sort of stuff, but beware MS-only 'extensions' that aren't marked as such.