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

JavaScript
1

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:

<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”.

$('#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

attr(“middle1b”,“middle1”);

should be

attr(“id”,“middle1”);

3

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.

4

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”.

$('#featured-nav a#middle1b').prev("a").attr("middle1b","middle1");

I assume you want:


$('#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

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:

#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:

$('#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:

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

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

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.