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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change Class of LI onMouseover

    I've been going out of my mind trying to get this to work, and now I'm out of time! It seems like it *SHOULD* be simple! All I am trying to do is get all of the <li> items that belong to a particular UL ID, and change the class name onmouseover. I've cut down the code to bare-bones to try and isolate the problem. I can get it to work if I use unique IDS for each list element, but that seems silly. The latest piece of code I am working with:

    Code:
    <script type="text/javascript">
    var mylist=document.getElementById("mylist")
    	for (i=0; i<mylist.childNodes.length; i++){
    	if (mylist.childNodes[i].nodeName=="LI") {
    	mylist.onmouseover=function() { 
    	setAttribute('class', 'menuActive'); }
    	mylist.onmouseout=function() { 
    	setAttribute('class', ''); }
    </script>
    
    <ul id="mylist">
    	<li>Test</li>
    	<li>Test</li>
    	<li>Test</li>
    </ul>
    TIA!

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    1. If you want to change the class of the individual list item, and not the UL,
    query the event target or srcElement of the mouse events that bubble up to the UL.

    2. To work in IE as well as more competent browsers,
    set the className property instead of using setAttribute.

    3. You cannot reference an element before it is rendered in the browser.
    Either run the script onload, or after the html it requires.

    < script type= "text/javascript">
    Code:
    window.onload= function(){
    	var mylist= document.getElementById("mylist");
    	mylist.onmouseover= function(e){
    		e= window.event? event.srcElement: e.target;
    		if(e.nodeName== 'LI') e.className= 'menuActive';
    	}
    	mylist.onmouseout= function(e){
    		e= window.event? event.srcElement: e.target;
    		if(e.nodeName== 'LI') e.className= '';
    	}
    }
    < /script>
    </head>
    <body>

    < ul id= "mylist">
    < li> Test< /li>
    < li> Test< /li>
    < li> Test< /li>
    < /ul>

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using <a>?

    Ahh, that is a little bit clearer to me now....the final requirement is that I fire the class change of the <li> when mousing over the <a></a>...so for this example, (I promise there is a good reason to do this that is beyond the scope of this issue!)...let's say the list looks like this:

    <ul id= "mylist">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    < /ul>

    I've been trying to use a getElementbyTagname after getting the nodeName==LI with no success just yet...can I trouble u for just one more hint!? THANKS SO MUCH! The biggest hurdle is cleared...I tried so many combinations!

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    if the target is a child of the element you want to change, find the parent.

    Code:
    if(e.nodeName== 'A'){
        var pa=e.parentNode;
        pa.className= 'menuActive';
    }
    If the target may be buried in p or other elements within the list item, climb the tree-
    Code:
    if(e.nodeName== 'A'){
        var pa=e.parentNode;
        while(pa && pa.nodeName!='LI')pa=pa.parentNode;
        if(pa)pa.className= 'menuActive';
    }
    Last edited by mrhoo; 01-25-2009 at 04:59 AM.

  • Users who have thanked mrhoo for this post:

    sundevil67 (01-25-2009)

  • #5
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mouseover

    Arg! It all makes good sense to me now, though it still won't work! I tried a few alerts and it doesn't seem to be firing the mouseover at all...I've got the 'tree' set up right...but....

    Code:
    window.onload= function(){
        var mylist= document.getElementById("mylist");
        mylist.onmouseover= function(e){
            e= window.event? event.srcElement: e.target;
            if(e.nodeName== 'A'){  
    		var pa=e.parentNode;		
        	pa.className= 'menuActive';
    		
    }
        }
        mylist.onmouseout= function(e){
            e= window.event? event.srcElement: e.target;
            if(e.nodeName== 'A'){
        	var pa=e.parentNode;
        	pa.className= '';
        }
    }

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hmmm....I got it to work using a getElementsByTagName, but I know this will conflict with other list items/links on the page when I put everything together.

    Code:
    <script type="text/javascript">
    window.onload = initMenu; // 1
    
    function initMenu() {
    	var links=document.getElementsByTagName('a'); // 2
        for(i=0; i < links.length; i++) { 
            var thisLink = links[i];
            if(thisLink.parentNode.tagName == "LI"){
                setActivity(thisLink);
            }
        }	
    }
    
    function setActivity(thisLink){
        thisLink.onmouseover = mouseOver;    // 3
        thisLink.onmouseout = mouseOut;
    }
    
    function mouseOver() {
        this.parentNode.className = 'menuActive';  // 4
        return this;
    }
    
    function mouseOut() {
        this.parentNode.className = '';
    	// Faster? change style instead of class - this.parentNode.style.backgroundColor = '#171717';
        return this;
    }
    </script>

  • #7
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Triple Arg, shoot me now! I got it! I was missing a stupid @()#@ bracket at the very end! What a rookie mistake. Thanks so much for your help and your patience!!!!!

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In case you want to look at a more polished example of what this will accomplish; before, I had tied the mouseover to the LI, but that was no good because it didn't fire at the same time as the image swap that was previously done with JavaScript....anyway, I kept running into problems until you helped me get this method going. I NEEDED to contain everything in the <a>; and now I have!

    Menu Test


  •  

    Posting Permissions

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