Animate left not working properly in webkit(Chrome/Safari)

Question

I have an issue with a jquery image slide plugin i'm working on where the images scroll left creating the slideshow. IE and FireFox work fine but Safari/Chrome(WebKit) just wont work.

This the call in question

    $(".nav li").live("click", function () {
    if (lastSelected != null) $(lastSelected).removeClass("selected");
    $(this).addClass("selected");
    place = parseInt($(this).text());
    if (place > last) {
        offset = parseInt(place - last);
        direction = "-=";
    }
    else {
        offset = parseInt(last - place);
        direction = "+=";
    }

// this is where it only works for IE and FF

    $(".slideshow img").each(function () {
        $(this).animate({
            left: direction + (offset * imageWidth) + "px"
        });
    });

// Am I doing something wrong hmm?

    reset = true;
    last = place;
    lastSelected = $(this);
}).css("cursor", "pointer");

can you give us a demo using an online tool like http://jsfiddle.net/ so we can test it more easily ? — fflorent, Nov 12 '11 at 14:22

score 1 · Answer 1 · answered Nov 12 '11 at 14:28

1

what is this lastSelected

are you sure

$(lastSelected).removeClass("selected");

is working ???

because

lastSelected is an `object` not an attribute

try this (assume you have an id attribute)

lastSelected = $(this).attr('id');

and

if (lastSelected != null) $('#'+lastSelected).removeClass("selected");

answered Nov 12 '11 at 14:28

Kanishka Panamaldeniya

17,302
31
123
193

Thanks Kanish, As you can see in the code lastSelect gets changed to $(this) which is the current object, on the next run it is the last object. This works fine. So I have been doing some debugging an have found that the (offset * imageWidth) stays 0 in WebKit browsers(Safari/Chrome), I have modified the code in question a little which is now live here: http://garruu.dyndns.org I don't understand why the value isn't working in WebKit browsers; so thats where i'm going to look, fingers crossed. – JeffreyJ Nov 13 '11 at 03:31
So some more debugging has found that imageWidth is not getting the image width in WebKit Browers. I also found out that a WebKit fix would be to put the image width in the tag. I would prefer a dynamic solution and wont close this thread until I get a better solution. – JeffreyJ Nov 13 '11 at 05:38

score 0 · Accepted Answer · edited May 23 '17 at 10:34

So I have been doing some debugging an have found that the offset * imageWidth stays 0 in Chrome!

Solution found:

These two sources help fix the "jQuery get image height or width returns 0 problem" which was the initial problem. I am now using the fix found in the first solution above and that works fine.

Animate left not working properly in webkit(Chrome/Safari)

2 Answers2