Question

I am using a “fly across” effect on my site. Like this – The Horizontal Effect.

The script works a treat in IE8,9, FF and Chrome. When in IE7 I have more than one element on a page. Both have the same id. Hovering over the first item on the page, It loads. Hovering over the other and it doesnt work at all. Doesnt quite make sense to me.

My code is as follows :

HTML

<div style="margin-bottom:30px;" id="takealook-sub">
            <a href="#">
                <img style="left: -200px;" alt="" src="path/to/image">
            </a>
</div>

jQuery

$(function(){
        $("#takealook-sub a").hover(function(){
            $("img", this).stop().animate({left:"0px"},{queue:false,duration:600});
        }, function() {
            $("img", this).stop().animate({left:"-200px"},{queue:false,duration:600});
        });
    });

Does anyone know of a reason why one would work in IE7, But not the other? Like I say all seems fine in all other browsers.

Thanks

Answer 1

You cannot have duplicate ids on a single document …. use a class instead … see the v4.0.1 HTML specs here and v5 HTML specs here

Example of using a class :

<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>
<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>

ie you can have as many as you like…. then you can do this :

$(function () {
    $(".takealook-sub a").hover(function () {
        $("img", this).stop().animate({
            left: "0px"
        }, {
            queue: false,
            duration: 600
        });
    }, function () {
        $("img", this).stop().animate({
            left: "-200px"
        }, {
            queue: false,
            duration: 600
        });
    });
});

in the jQuery selectors . is the prefix for classes instead of a # for ids