CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsinternet-explorer-9
Shadowxvii
Shadowxvii

Reputation: 1120

Jquery bug in IE9

I'm using Jquery 1.8.0 to create a banner rotator plugin and my code works correctly in Firefox and chrome, but mysteriously won't work sometimes in IE9 for no apparent reasons. I mean, the banner will simply not show up, and no errors either. It's simply not there.

So i added some alert (changed to console.log) to my code to trace where the code fails, and I think I found where.

html code on page:

<div class="content-top">
    <div id="bannerRotator"></div>
</div>
<div class="content-bot">
</div>

javascript code on page: 

$(document).ready(function() {
    console.log("Before banner rotator");
    $("#bannerRotator").BannerRotator({
        BRBannerImages: ["../Images/Banners/banner1.jpg",
                        "../Images/Banners/banner1-b.jpg",
                        "../Images/Banners/banner2.jpg",
                        "../Images/Banners/banner2-b.jpg",
                        "../Images/Banners/banner3.jpg",
                        "../Images/Banners/banner3-b.jpg",
                        "../Images/Banners/banner4.jpg",
                        "../Images/Banners/banner4-b.jpg",
                        "../Images/Banners/banner5.jpg",
                        "../Images/Banners/banner5-b.jpg",
                        "../Images/Banners/banner6.jpg",
                        "../Images/Banners/banner6-b.jpg"]
    });
    console.log("After banner rotator");

    $("#white-bg").css({ height: $(document).height() });

    console.log("After white bg");
});

banner rotator plugin: 

(function($) {

    $.fn.BannerRotator = function(options) {
        console.log("banner creation: begin");
        var opts = $.extend($.fn.BannerRotator.defaults, options);
        console.log("before foreach");
        return this.each(function() {
            alert("before this");
            // Commented out code
            alert("banner creation: end");
        });
        console.log("after foreach");
    };

    $.fn.BannerRotator.defaults = {
       // Default settings
    };

    // Other functions

})(jQuery);

When executing this code, the alert("after foreach"); will never show up and that is totally normal. The thing is sometimes it will all work, but at other times the last alert I get is alert("before this"); then I get directly to the alert("After banner rotator");.

One last thing I saw is that when the plugin works, the content in content-bot can be seen behind the alert box, while when the plugin fails, i can't see the content-bot, but everything before the bannerRotator is displayed. This led me to think that it maybe related to the $(document).ready function, since it seems that when the plugin fails, it fails because the $(document).ready fired too early.

UPDATE

Here's another thing I noticed. When I open my page for the first time, my banner doesn't appear. Nothing. No matter how much time I refresh, there's still nothing. But when I press F12 to get the Developer Tools window, the banner works. It still doesn't work all the time, but most of the time it does.

Nevermind about that part. It was the console.log that caused that problem. See Why does JavaScript only work after opening developer tools in IE once?

Upvotes: 1

Views: 2367

Answers (1)

Adelos
Adelos

Reputation: 438

Try with Jquery 1.7.2

There is a regression on document.ready event on Ie9

http://bugs.jquery.com/ticket/12282

Upvotes: 2

Related Questions