Why does this simple JQuery Hover Effect work everywhere EXCEPT in IE7 thru IE9?

Question

Being new to jQuery (but not vanilla JS) I am completely baffled why the following hover effect works in FF, Chrome, Safari, but not in IE! I got this script from one of Carl Meyer's post here; changing only the object id's to match my markup.

You can find a working example of this page here, but here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<title>test</title>  
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        $(document).ready(function() {
            toolButtons = $('#toolButtons > li');
            insideCenter = $('#insideCenter > div');
            toolButtons.each(function(idx) {
                    $(this).data('slide', insideCenter.eq(idx));
                }).hover(
                function() {
                    toolButtons.removeClass('active');
                    insideCenter.removeClass('active');             
                    $(this).addClass('active');  
                    $(this).data('slide').addClass('active');
                });
            });
    </script>
    <style type="text/css">  
        #toolButtons .active {   font-weight: bold; }  
        #insideCenter div {   display: none; }  
        #insideCenter div.active {   display: block; }  
    </style> 
 </head>

 <body>
    <ul id="toolButtons">   
        <li class="active">First slide</li>   
        <li>Second slide</li>   
        <li>Third slide</li>   
        <li>Fourth slide</li> 
    </ul> 
    <div id="insideCenter">   
        <div id="slide1" class="active">Well well.</div>   
        <div id="slide2">Oh no!</div>   
        <div id="slide3">You again?</div>   
        <div id="slide4">I'm gone!</div> 
    </div>
 </body>
</html>

Any help is greatly appreciated!

vinnie

it works on my IE8. How are you testing it on IEs? – Piotr Rochala May 03 '11 at 14:53 — Piotr Rochala, May 03 '11 at 14:53

anothershrubery · Accepted Answer · 2011-05-03T14:58:41.317

2

Call var toolButtons = $('#toolButtons > li'); and var insideCenter = $('#insideCenter > div');.

You dropped the var and it can't be seen as it is trying to set a global variable. Use var whenever possible, especially if the variable is not global.

EDIT: Pure jQuery:

$(document).ready(function() {             
   $('#toolButtons > li').each(function(idx) {                     
        $(this).data('slide', $('#insideCenter > div').eq(idx));                 
    }).hover(                 
        function() {                     
            $('#toolButtons > li').removeClass('active');
            $('#insideCenter > div').removeClass('active');                                  
            $(this).addClass('active');                       
            $(this).data('slide').addClass('active');                 
        });             
});

edited May 03 '11 at 14:58

answered May 03 '11 at 14:44

anothershrubery

20,461
14
53
98

It wouldn't be so bad if I hadn't admitted that I actually DO have vanilla JS experience -- but now I have no excuse for missing that! – vinnie May 03 '11 at 14:50
adding `var` to the declarations does fix an error in IE6 - http://jsfiddle.net/russcam/DYZT5/1/ – Russ Cam May 03 '11 at 14:53
the only point I would make with your edit is that in each iteration and each time the event handler function executes, you create new jQuery objects instead of using a closure to reference jQuery objects captured in variables in parent scope. The performance cost is most likely negligible, but it still creates a lot of objects unnecessarily, in my opinion. – Russ Cam May 03 '11 at 15:25
True, was only adding it as a quick alternative to the javascript/jQuery mixture. Not really required though. – anothershrubery May 03 '11 at 15:28

score 0 · Answer 2 · answered May 03 '11 at 14:42

I think there is an issue with your how internet explore is handling the javascript, it appears that it doesn't like your varibles, im sure the smarter people would be able to explain the differences between internet explorer and the other browsers in this context.

One solution would be to define them globally:

    <script type="text/javascript" language="JavaScript">
  var toolButtons;
  var insideCenter;
    $(document).ready(function() {
        toolButtons = $('#toolButtons > li');
        insideCenter = $('#insideCenter > div');
        toolButtons.each(function(idx) {
                $(this).data('slide', insideCenter.eq(idx));
            }).hover(
            function() {
                toolButtons.removeClass('active');
                insideCenter.removeClass('active');             
                $(this).addClass('active');  
                $(this).data('slide').addClass('active');
            });
        });
</script>

score 0 · Answer 3 · edited Jan 25 '14 at 21:30

well the obvious reason is that IE is crap. But as that doesn't actually help you... There could be a way to make this work in IE (try the other answers), but a simpler way I think would be to change how you are changing the css. You are using a function to detect that the list items are being hovered over, a simpler method would be to make a function, that is then run when the mouse hovers on the <li>

function onHover(){
change the css values for different IDs
}

then for each list item do

<li onmouseover="onHover();">blah</li>

you might need multiple functions (one for each li), but it depends on how you write your functions.

Why does this simple JQuery Hover Effect work everywhere EXCEPT in IE7 thru IE9?

3 Answers3