Question

basically got this bit of code that doesn’t work in ie8 & lower.

The automatic change fades out the current block of text, but doesnt fade in the new one which makes me think its the .next() that’s playing up, as clicking the numbers (the .click function) works fine.

jQuery:

function doSlideshow() {
    if ($('.image_links a.selected').attr("rel") == "five") {
        the = $('.image_links a:first');
    } else {
        the = $('.image_links a.selected').next('a');
    }
    $('.image_links a.selected').removeClass("selected");
    $(the).addClass("selected");
    var theNum = $(the).attr("rel");
    $('.image_area .images img:not(.visible)').removeClass().addClass("reset");
    $('.image_area .images img#' + theNum).removeClass().addClass("que");
    $('.image_area .images img.visible').fadeOut(500, function() {
        $('.image_area .images img.visible').removeClass().attr("style", "display:block;").addClass("reset");
        $('.image_area .images img.que').removeClass("que").addClass("visible")
    });
    $('.image_area .content .text').fadeOut();
    $('.image_area .content .text.' + theNum).fadeIn();
    thistimeout = setTimeout('doSlideshow()', 6000);
    return false;
}
$(function() {
    thistimeout = setTimeout('doSlideshow()', 6000);
    $('.image_area .images img').removeClass().addClass("reset");
    $('.image_area .images img#one').removeClass().addClass("visible");
    $('.image_links a').click(function() {
        clearTimeout(thistimeout);
        if ($(this).hasClass("selected")) {
            return false;
        }
        $('.image_links a.selected').removeClass("selected");
        $(this).addClass("selected");
        var theNum = $(this).attr("rel");
        $('.image_area .content .text').fadeOut();
        $('.image_area .content .text.' + theNum).fadeIn();
        $('.image_area .images img:not(.visible)').removeClass().addClass("reset");
        $('.image_area .images img#' + theNum).removeClass().addClass("que");
        $('.image_area .images img.visible').fadeOut(500, function() {
            $('.image_area .images img.visible').removeClass().attr("style", "display:block;").addClass("reset");
            $('.image_area .images img.que').removeClass("que").addClass("visible")
        });
        thistimeout = setTimeout('doSlideshow()', 6000);
        return false;
    });
});

Here is the link:
http://b2j3new.zen-host.com
The affected area is the top image changer. Works fine in webkit/gecko

Mucho appreciato!

Answer 1

Try replacing (2 places)

thistimeout = setTimeout('doSlideshow()', 6000);

with:

thistimeout = setInterval(function() {doSlideshow();}, 6000);

Remove from doSlideshow:

thistimeout = setTimeout('doSlideshow()', 6000);

And change:

clearTimeout(thistimeout);

To:

clearInterval(thistimeout);

Let me know if that helps.