jQuery hover w sticky click/selection problems in IE

Question

Ive made a 'hover with sticky click' jquery script for my web portfolio which works in Chrome, Opera, Firefox, and Safari - but I'm still having some problems with IE.

I have 8 thumbnails that fade between 0.3 and 1 opacity on hover. When clicked it uses the index of the thumbnail to show the corresponding full size image. It also is linked with a set of numbers, 1-8 that also fade from 0.3 to 1 opacity on hover.

The least clear part is the selection for which hover is applied. This is applied to the thumbnails/numbers by class and uses the index of the visible image to filter out the 'clicked' thumb/number so that it stays at full opacity regardless of hover.

With IE this 'sticky click' does not work, and all the elements revert to hover behavior. Where am I going wrong? (I dont need it to work back to IE6 or anything, but I want to at least get the current IE to work properly.)

<script type="text/javascript">
$(function() {    
    $(".gall").hide();
    $(".gall:first-child").show();
    var thumbs = $(".thumb2,.thumb")
    thumbs.fadeTo(0,0.3);
    $(".thumb2:first-child,.thumb:first-child").fadeTo(0,1);
    var notselected= $(".gall:visible").index();
    $(".thumb:not(#selected),.thumb2:not(#selected2)").hover(function (evt) {$(this).fadeTo(0,1);}, function (evt) {            
                  $(".thumb:gt("+notselected+"),.thumb2:gt("+notselected+"),.thumb:lt("+notselected+"),.thumb2:lt("+notselected+")").fadeTo(0,0.3);
    notselected.hover(function (evt) {notselected.fadeTo(0,1);},function (evt) {notselected.fadeTo(0,0.3);});
    });
    thumbs.click(function() {
        var thumbindex1 = $(".thumb").index(this)
        var thumbindex2 = $(".thumb2").index(this)
        if (thumbindex1>thumbindex2) {var indexboth = thumbindex1}
        else  {var indexboth = thumbindex2}
        var clicked = $(".thumb:eq("+indexboth+"),.thumb2:eq("+indexboth+")")
        var notclicked =  $(".thumb:gt("+indexboth+"),.thumb2:gt("+indexboth+"),.thumb:lt("+indexboth+"),.thumb2:lt("+indexboth+")")
            $("#tryme").html("A " +(indexboth+1)+ " was clicked <br> B "+(indexboth+1)+ " was clicked");  
            clicked.fadeTo(0,1);
            notclicked.fadeTo(0,0.3);
            $(".gall").hide();
            $(".gall:eq("+indexboth+")").show();             
         });
    });

The relevant HTML is straightforward:

---

There is a container: DIV class="contain" which hold a DIV class="gallery" , the main images are inside, each IMG class="gall" /DIV -- GALLERY --

there is a DIV class="thumbcontainer2" which contains the numbers 1-8 each in a separate DIV class="thumb2"

there is a DIV class="thumbcontainer" which contains the thumbnails 1-8 each in an IMG class="thumb"

/DIV -- CONTAIN --

---

Sorry if my jquery code is a little confused, it is my first jQuery/javascript. Im excited that it now works great in all the other mentioned browsers. Can anyone see where I am breaking it for Internet Explorer?

Thanks in advance for any help. -DAN

Answer 1

the long and the short of it was that the way I was using the .index() function was confusing IE. i found in another forum a suggestion to replace .index() with .prevAll(selector).size(); to achieve the same intended result. this is successful.

i'm still confused as to why this was a problem for IE when it worked fine in the other browsers. probably my syntax is a little questionable. jslint returned problems with variables already being defined where i use a conditional to decide from which list to select the 'indexboth' variable. maybe something related to this?