Question

In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a “blank” slide, then to the last one again and the it start cycling normally forever.

With this example I have to look at and play with it I am using two divs.

It can be viewed here: http://www.codekrewe.com/fbla

and the javascript code is here:

$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
    $('#dateHolder .featureHolder:first').fadeOut(1000)
    .next('.featureHolder').fadeIn(1000)
    .end().appendTo('#dateHolder');
}, 3000);
});

EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.

Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.

Answer 1

Well I found the fix for this, not quite sure why it had such an effect.

After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.

So moving the <h1> to the top before the divs were called, fixed the blank slide issue.