View Full Version : 4 ids, create and assign function to three that changes the class of the fourth?

11-03-2006, 05:05 AM
I'm a total beginner and I'm going nuts trying to figure this out. I have 4 unordered lists. They each have a unique ID, menu1-menu4 respectively. menu1 is special in that is not hidden. menu2-4 are basic dropdowns. I need to create a function that checks to see if menu2, menu3, or menu4 is active (has a mouseover) and if it is, assigns the class "hide" to the first LI in menu1. I'm using the :hover pseudo class to show the menus in standards compliant browsers and the suckerfish dropdown script to add an "over" class to the lists when the :hover class is is present, as usual. I've never had a situation where I needed to hide one otherwise visible menu whenever one otherwise hidden menu is visible. Since I modified suckerfish like so:

startList = function() {
if (document.all && document.getElementById) {
for (d = 1; d<=10; d++) {
navRoot = document.getElementById('menu'+d);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
node.onmouseout=function() {
this.className=this.className.replace("over", "");


I thought perhaps I could simply add

if (d!=1) menu1.className+="hide";
to the penultimate function. However, rather than applying the the style defined in .hide, IE just moves the entire UL to another part of the screen. Other browsers, of course, ignore it completely because of the first "if" loop. Can someone help me create something that will achieve this in IE6, IE7, and Firefox? I'm trying to learn what often seems like an alien language and would appreciate any assistance. I've searched the forum before posting and didn't find a similar request, although my search terms might not have been up to the task.

a frustrated noob.

11-03-2006, 05:30 AM
instead of changingthe whole class, just change the style.display value.

document.getElementById('itsid').style.display="none"; //to hide
document.getElementById('itsid').style.display="block"; //to show

11-03-2006, 05:42 AM
Good idea, but three problems. 1) I'd like to make a separate script since the :hover pseudo class takes care of the showing part for most browsers -- I guess I can make one without the initial "if" loop that only hides --, 2) I've read that all browsers (except safari) handle changing classes with greater celerity than they do changing specific style declarations, and 3) I need to target the first LI in the UL that has ID of menu1, something which I think is easy but never manage to write correctly. I suspect because I'm still learning the grammar of javascript. Thank you for taking the time to help me, I hope you are able to find a moment to further elucidate me. I'm trying to learn, but if you don't have a mind inclined towards scripting, it gets confusing rather quickly.