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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trouble assiging formatting to ID...

    I have a function which I run onload to apply formatting to a list of links.
    This function handles both the static state and the hover state formatting.
    Code:
    function featuredEffects() {
    	featured = document.getElementById("work_1").getElementsByTagName("li");
    	for(var q = 0; q < featured.length; q++) {
    		featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
    		featured[q].onmouseover = function() {
    			this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
    		}
    			featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
    		}
    	var featuredZone = document.getElementById("work_1");
    	featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}
          
    }
    This works perfectly. Here is the wrinkle. I am tagging the first item in my list with a class (could be ID if it makes it easier) of "active".
    And to this element I want to apply a backgroundPosition of "0 46px. Initially, I thought I could just define this in my style sheet.
    No go. Seems the JS overwrites those values. This is also true for defining inline as well.

    So, I've been trying to figure out how to incorporate this logic in my featuredEffects() function. I've tried:
    Code:
    function featuredEffects() {
    	featured = document.getElementById("work_1").getElementsByTagName("li");
    	for(var q = 0; q < featured.length; q++) {
    	    if(document.getElementById("active").className=="active"){
    	        document.getElementById("active").style.backgroundPosition = "0 46px";
    	    }else{
    		featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
    		featured[q].onmouseover = function() {
    			this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
    		}
    			featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
    		}
    	var featuredZone = document.getElementById("work_1");
    	featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}
          
    }
    However, as you can guess this doesn't work. Which is why I'm here. Would anyone have a clue how to do this?

    Thanks in advance.
    Last edited by hothousegraphix; 12-14-2007 at 02:52 PM.

  • #2
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thought this might work too; move the className of my active item to the link contained in my list item. Then:
    Code:
    function featuredEffects() {
    	featured = document.getElementById("work_1").getElementsByTagName("li");
    	for(var q = 0; q < featured.length; q++) {
            /* updated conditional */
    	    if(featured[q].getElementsByTagName("a")[0].className=="active"){
    	        document.getElementById("active").style.backgroundPosition = "0 46px";
    	    }else{
    		featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
    		featured[q].onmouseover = function() {
    			this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
    		}
    			featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
    		}
    	var featuredZone = document.getElementById("work_1");
    	featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}
          
    }
    Last edited by hothousegraphix; 12-14-2007 at 03:05 PM.

  • #3
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Would anyone happen to be able to help?

    The trick is seems to be targeting the one item in my list with a class of "active".

    I've tried
    Code:
    function makeHovers() {
    	featured = document.getElementById("work").getElementsByTagName("li");
    	for(var q = 0; q < featured.length; q++) {
    		featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
    		//conditional to target li with class of active - doesn't work
                    if(featured[q].className=="active") function(){
    			this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
    		}
    		featured[q].onmouseover = function() {
    			this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
    		}
    			featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
    		}
    	var featuredZone = document.getElementById("work");
    	featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}} 
    }
    The conditional here does not function. However, the rest of the function is working.

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    52
    Thanks
    0
    Thanked 4 Times in 4 Posts
    What are you trying to do?


  •  

    Posting Permissions

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