JQuery script problem in Internet Explorer

Question

I made a script which works in all browsers, except for SOME Internet Explorer's. I cannot seem to figure out why some Internet Explorer's work, and others don't. At the office, 4 Internet Explorer 8's @ version 8.0.6001.18702 work perfectly while 4 others Internet Explorer's 8 @ version 8.0.6001.18702 (so completely the same browsers) are not working. We all have Windows XP and all the latest updates.

Please visit http://www.stardekk.be/voorontwerp/verco/ with Firefox, safari, chrome, ... and afterwards with Internet Explorer (7, 8, doesn't matter).

The problem lays within the top of the website. The thumbs should have an overlay, and when hovered; the overlay should go away and a tooltip should come up.

I hope someone can help me since 50% of the Internet Explorer's work, and 50% don't.

Thank you

<script type="text/javascript" language="javascript">
$(window).load(function() {
$("#gallery div img").after('<div class="overlay"></div>');
$(".overlay").css("position", "absolute");
$(".overlay").css("z-index", "30");
$(".overlay").css("background", "url('images/overlay.png')");
$(".overlay").css("top", "0");
$(".overlay").css("left", "0");
$(".overlay").css("width", "241px");
$(".overlay").css("height", "146px");

var userAgent = navigator.userAgent.toLowerCase();

if ($.browser.msie) {
    $('.overlay').hover(function() {
        $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
    },
    function() {
        $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", 0.8);

    });
} else { 
    $('.overlay').hover(function() {
        $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
    },
    function() {
        $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", 1);
    });
}
});

Off-topic, but you can (and should) combine those seven $(".overlay").css(...); calls into a single call passing in an object with the keys; you're making the browser work way harder than it needs to. See .css(map) here: api.jquery.com/css/#css2 — T.J. Crowder
– T.J. Crowder, Commented Nov 29, 2010 at 13:22
another off-topic suggestion, if the only difference between the ie & firefox versions is the .8 & 1 in the fadeTo, have var trans = $.browser.msie ? 0.8 : 1; then use trans in the call to fadeTo — John Boker
– John Boker, Commented Nov 29, 2010 at 13:28
Thanks for that; i'll keep that in mind! But i first need to find the problem.. — Mathijs
– Mathijs, Commented Nov 29, 2010 at 13:28

tvanfosson · Accepted Answer · 2010-11-29 13:23:48Z

2

Try using the document ready function, or it's shorthand version, instead of the window load event to wrap your code.

 $(function() {
    ...
 });

answered Nov 29, 2010 at 13:23

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathijs Over a year ago

Thanks for the tip, but i tried that already and it doesn't help. Also, i use window.load this time because otherwise Chrome has a problem with document ready!

Andy McCluggage · Accepted Answer · 2010-11-29 13:27:40Z

0

Have you checked that all the identical browsers are running in the same compatibility mode? Using the Developer Tools the browser can be configured to use different rendering engines. The options are...

IE7
IE8
IE8 Compatibility View.

answered Nov 29, 2010 at 13:27

Andy McCluggage

38.9k18 gold badges62 silver badges71 bronze badges

1 Comment

Mathijs Over a year ago

Yes, i quadruple checked compatibility settings. All had IE8 - IE8, or IE7 - IE7 and none had IE8/IE7 - Compatibility view.

Mathijs · Accepted Answer · 2010-11-29 13:40:37Z

0

New code (with tips)

$(window).load(function() {
$("#gallery div img").after('<div class="overlay"></div>');
$(".overlay").css({"position":"absolute", "z-index": "30", "background": "url('images/overlay.png')", "top": "0", "left": "0", "width": "241px", "height": "146px"});

var trans = $.browser.msie ? 0.8 : 1;

$('.overlay').hover(function() {
    $(this).stop().fadeTo("fast", 0, function() { $(this).css("background", "transparent") });
},
function() {
    $(this).stop().css("background", "url('images/overlay.png')").fadeTo("fast", trans);

});
});

answered Nov 29, 2010 at 13:40

Mathijs

1

Collectives™ on Stack Overflow

JQuery script problem in Internet Explorer

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related