CODEWITHSUNDEEP
javascriptjquery
Tom
Tom

Reputation: 12998

jquery - get position problem in Firefox

I have the following code which gets the left and top position of the element you are hovered over. It produces the right results in safari and IE but fails to get the position of the img that you hover over in Firefox - it returns 0, 0. Can anyone see why this might be??

I think it might be something to do with setting it as the variable as it seems to work if I place it straight in the function. I need to set it as a variable though so it can return to its original state.

$.fn.hoverAnimationTwo = function () {
    return $(this).each(function () {

        var originalLeftTwo = parseInt($(this).css("left"));
        var originalTopTwo  = parseInt($(this).css("top"));

        return $(this).hover(function () {
            $(this).animate({
                width: "17px",
                height: "17px",
                left: originalLeftTwo - 5,
                top: originalTopTwo - 5
            }, 100);
        },function () {

            $(this).animate({
                width: "7px",
                height: "7px",
                left: originalLeftTwo,
                top: originalTopTwo
            }, 100);
        });
    });
}

$(".myImg").hoverAnimationTwo();

The other thing which is very odd is that I can copy all of my code into jsfiddle and it seems to work.

EDIT: OK... so it turns out this isn't a javascript issue as such. It is because elsewhere in the page I had given an element a class beginning with a numeric character which is entirely my bad and I should know better!

Upvotes: 1

Views: 511

Answers (1)

Brian Rose
Brian Rose

Reputation: 1725

Browsers seem to have some inconsistencies when relying on CSS properties. Have you tried using .position() or .offset() (whichever is applicable to your needs)?

http://api.jquery.com/offset/ or http://api.jquery.com/position/

Upvotes: 2

Related Questions