JavaScript Slider Problem

[iMattR]

Hi, all.

I’ve recently been doing some development for a mate of mine on a website (he did the design, gave it to me, and I’ve been writing the mark-up, stylesheets, etc.), and I’m having a tiny issue with a JS banner that I’ve done (can’t say it’s going to be the most proficient code you’ve ever seen, but still). Basically, whenever you scroll to the very bottom of the page and the slide changes it scrolls you up a bit, which is rather odd.

Here’s the JavaScript:

var banner_slides = new Array('one', 'two', 'three', 'four', 'five', 'six');

var banner_index = 0;

function change_slide() {

var banner_slide = $('div#' + banner_slides[banner_index]);

$(banner_slide).fadeOut(500, function() {

if (banner_index == banner_slides.length - 1) {

banner_index = 0;

} else {

banner_index++;

}



$('div#' + banner_slides[banner_index]).fadeIn(500);

});

}

And here’s the HTML:

1) 5 Steps


Brought to you by the best online recruitment agency...








2) Advertise


A targeted advertising campaign








3) Filter


A trained recruiter will filter CV's on your behalf, and search all major CV databases








4) Respond


We will respond to candidates in a professional and confidential manner








5) Shortlist


Candidates will be screened and shortlisted based on the specification provided








6) Deliver


All suitable candidates will be delivered to your inbox

Also, seeing as I don’t think my descriptive skills are that great in all honesty, here’s a link to a video of what happens: http://vimeo.com/34900469

Any help with this would be great – cheers!

[jamygolden]

Here is some simplified code:

var $banner_slides = $('#banner').children(),

banner_index = 0;



function change_slide() {



// Set current slide

var $current_slide = $banner_slides.eq( banner_index);



$current_slide.fadeOut(500, function() {



if ( banner_index == $banner_slides.length - 1 ) {

banner_index = 0;

} else {

banner_index++;

}



// Set new current slide

var $current_slide = $banner_slides.eq( banner_index);



$current_slide.fadeIn(500);



});

} // change_slide()

With html:

1) 5 Steps


Brought to you by the best online recruitment agency...








2) Advertise


A targeted advertising campaign

That can’t be all of the js though – could we see the rest?

[iMattR]

Oh, yeah, sorry about that – this is the only other line that’s related to the above code:

slide_changer = setInterval(change_slide, 6000);

I shall try the simplified code when I get in tonight – cheers.

[Author]

Posts