CSS menu and small javascript will not work in IE 1

[taylorantone]

I have two drop-down menus using ul's on the same page, and there's a small javascript that had to be added to make the hover/over property work in IE on non-links.

This script holds the id of the menu to reference. Well, since I have two menus on the same page, I can't give them both the same id, so I tried to add them both to the javasctipt ("navbar","mainmenu"). Doing that makes both menus work properly in Firefox, but no IE. Only the first one in the list works.

Is there a way to fix this?

Oh, I realize this may be more a javascript question, but these bugs in IE with CSS are just ridiculous, so I figured I'd start here.

Thanks.

And here's a link to the page in question (no, the main menu is not completed. I just didn't see the need in completing that before I could get this working:

http://www.taylorandjanet.com/default1.htm

 

[Vragabond]

You're right, it is a javascript question. In FF it works because it does not need the javascript to work and your problem is in javascript. Or better, Document Object Model. You cannot reference two documents by just splitting their ids with a comma in a getElementById() method. I guess the easiest way is to do the for loop twice, once for the first menu and once for the second. You will have to issue two getElementById methods though.

 

[taylorantone]

I am Javascript stupid. Only reason I even have this one is because of a copy/paste from the web.

How would I re-write this so that both--or even more--menus would work?

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navbar", "mainmenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>
</script>

 

[taylorantone]

Nevermind. I asked too soon. Here's what I did and it appears to work:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navbar");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("mainmenu");
for (j=0; j<menuRoot.childNodes.length; j++) {
node = menuRoot.childNodes[j];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>
</script>

 

[kenrbnsn]

An easier way to do this and make it generic, so you can have any number of dropdown menus would be to change:

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

to

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

Get rid of your second "if" block, and add change

window.onload=startList;

to

window.onload= function(){
    /* pass the function the id of the top level UL */
    startList('navbar');
    startList('nainmenu');
}

If you have more dropdown menus just keep adding to the function defined in the "window.onload".

Ken

BTW, if you surround your code with the [ code] and [ /code] tags it will be much easier to read.

 

[taylorantone]

Awesome! That's exactly what I was looking for. I could really see that script increasing in size, and this keeps it very small, no matter how many menus I decide to use. Two is all I can realistically see without the page becoming too crazy.

Thank!!