Question

I have a section on a website where you click a div to display a menu of images to the right, select your choice and open a bigger version of said image in the div initially clicked. All works great on all browsers except IE, but it is a strange behavior.

Here’s an example. If you’re using IE (tested in 8 and 9), the top row large div and the bottom row last div (cubierta and frente) share the same image menu; the top row last three divs (under tela) also share the same menu. And those are precisely the ones not working in IE. The strange thing, however, is that I open the developer tools to try and see what’s wrong, and immediately after that everything works fine. So I know the images and the script are working, just not on first opening the page (or actually until I hit F12), and I can’t figure out why.

Part of the code I’m using and it’s common across the problematic divs is:

var clickedDiv = null;
$(".tela_").click(function(){
    $(".nav a").removeClass("active");
        $(".tela1").addClass("active"); // start on first tab when clicking either of the 3 blank divs
    $("div[id$=_options]").css("visibility", "hidden");
    $("#acabados_main #tela1_options").css("visibility", "visible");
    console.log("setting div");
    clickedDiv = $(this);
});
$('#tmp .image_carousel div>img').click(function () {
    console.log("img clicked");
    var $img = $(this),
        imageName = $img.attr('alt'),
        chopped = imageName.split('.');
    clickedDiv.next().text(chopped[0]);
    clickedDiv.find('img').attr('src', $img.attr('src'));
});

I tested the site in Opera, Chrome, FF, Safari, on PC and MAC, and only Explorer showed that behavior (though my client says she had the same happening in Chrome). I have no idea where to start looking, can someone help me shed some light on this?

Thank you.

Answer 1

Try to take out your console logs if you haven’t , they don’t work in IE and will break code from what I have experienced