Javascript and problem with IE 6

[pwharff]

I found this article that outlines how to create horizontal drop down menu's using CSS and Javascript:

http://www.alistapart.com/articles/horizdropdowns/

The problem I face is I wanted a vertical drop down menus instead, so this is what I came up with:

http://noahprecision.com/stage/top.shtml

It works fine in just about every browser except IE 6 and that is why Javascript is used (as explained in the above mentioned article).

Here's the Javascript:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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;

Now let me just say this: I know some shell scripting, but I know nothing about Javascript.

Since my Navigation bar is across and not down like in the article above, I had to separate them into tables, thus breaking IE 6 again.

So how do I get the Javascript to work on each table? I tried changing "nav" to "nav1" and duplicate the script and increment the variable by one each time and therefor changing the "id" reference in the HTML as well, this didn't work. So I am at a loss, could someone who know's Javascript help me out?

[pwharff]

One of the guys over at alistapart.com named "Tom" seems to mention exactly what I need:

http://www.alistapart.com/comments/horizdropdowns?page=#6

But as I said before, I don't know anything about Javascript, so I don't know how to interpret his code. This is what he says:

The Suckerfish code is very useful but can be improved to accommodate multiple uses in multiple scenarios. See below for the modified function (line wraps marked by an underscore). Once the list has been written to the browser, simply call the function below with the appropriate parameters. Thanks for the article.

function fnSetHoverClass(parentID, tag,_ hoverClass) { var el = document.getElementById(parentID); if (el) { el = el.getElementsByTagName(tag); for (var i=0; i < el.length; i++) { el[i].onmouseover = function()_ {this.className = ” ” hoverClass;} el[i].onmouseout = function() {this.className = this.className.replace(new RegExp(” ” hoverClass ”\\b”), ””);} } } }

[bwkaz]

First: I'm going to reindent your script, so I can tell what's at each scope level:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");

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; OK. Now first, it appears that you're going to have a problem with this line:

this.className=this.className.replace(" over", ""); in your onmouseout function. When you set the className property on an HTML element in IE, it will trim the spaces off both ends of the className value. So you're going to have to get rid of the space before "over" inside the replace, or it's going to break whenever "this" has a blank className.

Second, since you went to a table, you're going to have major problems with anything referencing navRoot.childNodes. The child nodes of the table are only its rows (childNodes only references direct children). Basically, you can't be changing the markup.

If you want to use the original script from alistapart, you should probably go back to whatever the original markup from them was. If you want a list to display horizontally, use CSS, don't make it a table. (This goes for everything else you're doing too: NEVER use tables unless you're displaying tabular data!)

[pwharff]

First: I'm going to reindent your script, so I can tell what's at each scope level:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");

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; OK. Now first, it appears that you're going to have a problem with this line:

this.className=this.className.replace(" over", ""); in your onmouseout function. When you set the className property on an HTML element in IE, it will trim the spaces ...

Thank you very much, I'm an idiot when it comes to CSS and Javascript. I'm still not very sure what I fill in where on the Javascript to get it to work. If only I was able to reply to the original creator of the thread, but the discussion is closed. Once again, thanks for your wonderful knowledge and advice.

[pwharff]

First: I'm going to reindent your script, so I can tell what's at each scope level...

Dang, I'm sorry again, please try to bare with me. I believe I have mis-communicated. The Javascript that you indented, was the original code, however someone else posted code that will work in my scenarior, but I don't understand how to use it or even indent it correctly:

function fnSetHoverClass(parentID, tag,
hoverClass) { var el = document.getElementById(parentID); if (el) { el = el.getElementsByTagName(tag); for (var i=0; i < el.length; i++) { el[i].onmouseover = function()
{this.className = ” ” hoverClass;} el[i].onmouseout = function() {this.className = this.className.replace(new RegExp(” ” hoverClass ”\\b”), ””);} } } }

[pwharff]

First: I'm going to reindent your script, so I can tell what's at each scope level...

Nevermind, I finally got it working:

http://noahprecision.com/stage/top.shtml

Thanks.

[bwkaz]

Glad that it works, but FYI, this:

<!--//--><![CDATA[//><!-- and this:

//--><!]]> are both completely unnecessary. You only need to enclose the JS code in some special markup if it's embedded directly into the HTML; if it's in a separate file (and as long as your script tag has a type="text/javascript" or type="text/ecmascript" attribute, along with a "src" attribute pointing to that .js file), then you don't need to bother with any of this.

The HTML comments and CDATA sections are only there to prevent browsers from interpreting certain characters in your JS code as HTML (specifically, any angle brackets (less-than or greater-than comparisons) will be interpreted as tag start/end markers unless you put the JS in a comment, and any decrement operators ("variable--;" or "--variable;" statements will be interpreted as the-end-of-the-comment in some browsers without the CDATA section). If your JS code is not embedded in your HTML page, but in a separate file, then you don't need to bother. :)