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.