1

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?

Community
  • 1
  • 1
Shadowxvii
  • 1,080
  • 2
  • 12
  • 31
  • Please press F12 and try with IE7 and IE8 emulation, I'm sure you will need update with more information this issue. IE9 works really really bad, worse than 8. – Leandro Bardelli Aug 24 '12 at 19:57
  • What about other IE versions? Does it work on them? Note that Internet explorer has no precise standards than some of the other popular web browsers. – Lion Aug 24 '12 at 20:01
  • So I tried it with IE8 and IE7 (real browser, not emulation) and it works all the time in IE8, and never in IE7. – Shadowxvii Aug 24 '12 at 20:08
  • 1
    If you think it is a timing issue, try debugging with `console.log("debug message")` rather than `alert()` which is not real-time as it waits for a click. – Owlvark Aug 24 '12 at 21:37
  • What are the differences in the DOM between when it works and when it doesn't work? (You'll need to refresh the developer tools view to see the latest DOM.) – Brilliand Aug 24 '12 at 22:34
  • @Owlvark Thanks for the tip, though it caused more problems in IE7, making it not work even more. I solved the problem in IE7 though, as it was not related to javascript, but to the fact that IE7 does not support `inherit` for `height` and `width`. – Shadowxvii Aug 27 '12 at 14:13
  • @Brilliand I did a comparison of the DOM of the page when it works and when it doesn't. There are many differences, but basically, when i look at the not working DOM page, it's like the code in my `$(document).ready` function wasnt applied, not only the bannerRotator. Could this be caused by having multiple `$(document).ready` functions on the same page? – Shadowxvii Aug 27 '12 at 14:16
  • `console.log` will work in IE9 if you use the "Developer Tools" (press F12 like Leandro said, and open the console tab). There is usually no problem with multiple `$(document).ready` functions, they will all get called. – Owlvark Aug 27 '12 at 14:27
  • I know it works in IE9, but it doesn't in IE7. Anyway, i tried putting `console.log` instead of alerts. The result is the same. The log skips from `before foreach` to `after banner rotator` without executing the code in between. – Shadowxvii Aug 27 '12 at 15:18
  • I updated my code. I also noticed something. I had a line that set the height of a white background div (I use this for modal popup). So, when the banner rotator doesn't work, I noticed that the white background's height isn't set like it should, but the `console.log` that follows does add the `After white bg` to the console. – Shadowxvii Aug 27 '12 at 15:40

1 Answers1

2

Try with Jquery 1.7.2

There is a regression on document.ready event on Ie9

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

Adelos
  • 418
  • 3
  • 5