SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing link ID on the fly with JQuery's .attr - possible?

    Hi all,

    I am using the JQuery cycle plugin that lets me use buttons to fade in and out between different content. The structure is as follows:

    HTML Code:
    <div id="featured-nav"> 					           
                
                   <a href="#" id="left" class="activeSlide" title="Buy compatible laptop memory in no time at all">                
    					
                         <!-- button text/images goes here -->    
                        
                   </a>
                   <a href="#" id="middle1b" title="Find help prior to buying your memory upgrade">
                    
                         <!-- button text/images goes here -->	
                                           
                   </a>				
    	       <a href="#" id="middle2" title="Install laptop memory with your own skills">
                    
                         <!-- button text/images goes here -->                
                                            
                   </a>				
                   <a href="#" id="right" title="Smile thanks to superior laptop performance" >
                    
                         <!-- button text/images goes here -->	                                   
                        
                   </a>
                
    </div>
    It all works fine but now I need to change the second <a> above, or specifically its ID from "middle1b" to "middle1" on the fly. I'm trying to do it via the method below but somehow JQuery isn't finding the second <a> and hence it can't change it's ID from "middle1b" to "middle1".

    Code:
    $('#featured-nav a#middle1b').prev("a").attr("middle1b","middle1");
    I need to change the link's ID so the hover button image is different as this is necesary to blend it in with the content above it.

    Can someone please suggest where I'm going wrong.

    Many thanks,

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    attr("middle1b","middle1");

    should be

    attr("id","middle1");
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by netsearchmonkey View Post
    Code:
    $('#featured-nav a#middle1b').prev("a").attr("middle1b","middle1");
    I need to change the link's ID so the hover button image is different as this is necesary to blend it in with the content above it.

    Can someone please suggest where I'm going wrong.
    First you are navigating from the #middle1b element to the link that comes before it, when I presume it is the #middle1b link that you want to affect.
    Second, read the documentation for the jQuery attr and you will find that you aren't using it correctly, so fix that too and you'll be good to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to do it via the method below but somehow JQuery isn't finding the second <a> and hence it can't change it's ID from "middle1b" to "middle1".
    Code:
    $('#featured-nav a#middle1b').prev("a").attr("middle1b","middle1");
    I assume you want:
    Code:
    $('#featured-nav a#middle1b').attr('id', 'middle1');
    I need to change the link's ID so the hover button image is different as this is necesary to blend it in with the content above it.
    The ID is a unique identifier. Can't you assign the hover image to the id or assigned class (a class, I am judging would probably be ideal) via css? Maybe I am missing something else....

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, $('#featured-nav a#middle1b').attr('id', 'middle1'); did the trick...I actually ended up figuring it out myself but tthanks anyway.

    As for why not go the class route, I guess I could just keep the ID the same and deploy a class to go changing the background image but that way I would be using two different code paths to do the same thing. I try and keep methods consistent unless I'm forced to do it otherwise.

    I'm now I'm scratching my head on why isn't middle1b taking effect when the page loads, not until either a) all four buttons loop through on auto or b) I click the first button.

    The CSS is:
    Code:
    #featured-nav a#left, #featured-nav a#middle1, #featured-nav a#middle1b, #featured-nav a#middle2, #featured-nav a#right {
    	width: 146px;	
    	height: 93px;
    	overflow: hidden;
    	position: relative;
    	padding:19px 10px 0px 130px;
    	margin: 0px 0px 0px 0px;	
    }
    
    #featured-nav a#left {background: url(../images/leftbutton.png) top left no-repeat;}
    #featured-nav a#left:hover, #featured-nav a#left.activeSlide {background: url(../images/leftbutton.png) bottom left no-repeat; }
    
    #featured-nav a#left h2, #featured-nav a#middle1 h2, #featured-nav a#middle1b h2, #featured-nav a#middle2 h2, #featured-nav a#right h2 {color: #384765;}
    #featured-nav a#left.activeSlide h2, #featured-nav a#middle1.activeSlide h2, #featured-nav a#middle1b.activeSlide h2, #featured-nav a#middle2.activeSlide h2, #featured-nav a#right.activeSlide h2 {color: #C00000;}
    
    #featured-nav a#middle1, #featured-nav a#middle2 {background: url(../images/middlebutton.png) top left no-repeat;}
    #featured-nav a#middle1:hover, #featured-nav a#middle1.activeSlide, #featured-nav a#middle2:hover, #featured-nav a#middle2.activeSlide {background: url(../images/middlebutton.png) bottom left no-repeat;}
    
    #featured-nav a#middle1b {background: url(../images/middlebutton2.png) top left no-repeat;}
    #featured-nav a#middle1b:hover, #featured-nav a#middle1b.activeSlide {background: url(../images/middlebutton2.png) bottom left no-repeat;}
    
    #featured-nav a#right {background: url(../images/rightbutton.png) top left no-repeat;}
    #featured-nav a#right:hover, #featured-nav a#right.activeSlide {background: url(../images/rightbutton.png) bottom left no-repeat;}
    ...so that's all correct as I've scanned my eyes over it several times now.

    and the JS code is:
    Code:
    $('#slides_featured').cycle({ 
        fx:     	'fade', 
    	speed:		1300,
        timeout: 	23000,
    	pager:  '#featured-nav', /* navigation that controls the slider (do not edit) */	
       	pagerAnchorBuilder: function(idx, slide) { return '#featured-nav a:eq(' + idx + ')'; }, /* DO NOT DELETE */
    	before: function(curr, next, opts) {
    	
    	switch (opts.nextSlide) {
    	case 0: 		
    		$('#featured-nav #middle1').attr('id','middle1b');	
    		$('#featured-nav a#left').addClass('activeSlide');
    		$('#featured-nav a#middle1b').removeClass('activeSlide');	
    		$('#featured-nav a#middle2').removeClass('activeSlide');			
    		$('#featured-nav a#right').removeClass('activeSlide');	
    	break;	
    	case 1: 		
    		$('#featured-nav #middle1b').attr('id','middle1');		
    		$('#featured-nav a#left').removeClass('activeSlide');	
    		$('#featured-nav a#middle1').addClass('activeSlide');			
    		$('#featured-nav a#middle2').removeClass('activeSlide');		
    		$('#featured-nav a#right').removeClass('activeSlide');	
    	break;	
    	case 2:			
    		$('#featured-nav #middle1b').attr('id','middle1');
    		$('#featured-nav a#left').removeClass('activeSlide');
    		$('#featured-nav a#middle1').removeClass('activeSlide');	
    		$('#featured-nav a#middle2').addClass('activeSlide');		
    		$('#featured-nav a#right').removeClass('activeSlide');			
    	break;
    	case 3: 	
    		$('#featured-nav #middle1b').attr('id','middle1');
    		$('#featured-nav a#left').removeClass('activeSlide');	
    		$('#featured-nav a#middle1').removeClass('activeSlide');	
    		$('#featured-nav a#middle2').removeClass('activeSlide');		
    		$('#featured-nav a#right').addClass('activeSlide');	
    	break;	
    	}
    	
    	Cufon.refresh();
    	
    	}	
    });
    ..and that too works once either scenario (a) or (b) occurs as mentioned above.

    Which suggests the HTML in the page itself is all wrong but then that looks like this:

    HTML Code:
    <!-- Slide Buttons -->
    			<div id="featured-nav"> 					           
                
                	<a href="#" id="left" class="activeSlide" title="Buy compatible laptop memory in no time at all">                
    					
                        <!-- button text/images goes here -->                 
                        
                   </a>
                   <a href="#" id="middle1b" title="Find help prior to buying your memory upgrade">
                    
                        <!-- button text/images goes here --> 
                        
                   </a>				
    			   <a href="#" id="middle2" title="Install laptop memory with your own skills">
                    
                        <!-- button text/images goes here -->                   
                                            
                  	</a>				
                    <a href="#" id="right" title="Smile thanks to superior laptop performance" >
                    
                        <!-- button text/images goes here -->                                         
                        
                  	</a>
                
                </div>
                <!-- End Slide Buttons -->
    and hope is again lost since I'm clearly saying that middle1b should be initial ID, not middle1, even though the page unless (a) or (b) occurs behaves like it's middle1. This is clearly visible since middlebutton.png looks different to middlebutton2.png

    So I thought ahh, maybe the order in which these appear in the CSS file is to blame, after all IE does that I've seen, so I tried it, making sure middle1b was listed before middle1 and still no go. I've tested it in Chrome and Safari and Opera and nothing, they all behave identically once again suggesting it's the code.

    There are no other ID's that could be interfering.

    The last resort I see is to change the name completely. Perhaps when browsers parse CSS they match the first class or ID they can find and hence the name middle1 seems the same as middle1b.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved it. Since I was doing switch (opts.nextSlide) it automatically fired the subsequent slide code which was resetting the middle1b ID back to middle1.

    I placed a left mouse click detection spanning #featured-nav into each of the slide codes and now it works just fine.

    Sorry for posting something I could solve myself. If only I could be as observant as in my youth...

    Thanks.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Spotting the solution just after asking the question is quite common. You are thinking about the problem in a different way when you try to describe it to someone else than you are when trying to solve it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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