Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    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() {
                                   this.className+="over";
                              }
                              node.onmouseout=function() {
                                   this.className=this.className.replace("over", "");
                           }
                         }
                    }
               }
         }
    }
    
    window.onload=startList;

    I thought perhaps I could simply add
    Code:
    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.

    Thanks!
    a frustrated noob.

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmm

    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.
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •