jQuery Offset().left doesn't work properly

javascript jquery offset
FilipBenes picture FilipBenes · Nov 19, 2012 · Viewed 31.7k times · Source

I have a question about jQuery offset() function. I use it on my site to display "email a friend" window after clicking on email icon.

However, the window appears sticked to the right side of browser's window, not on the position of the icon. You can see it in action on http://pec.solarismedia.net/calendarday.html

$(".emailFriend").hide();
    $(".emailIcon").on("click", function(e) {
        $(".emailFriend").css({
            "position": "absolute", 
            "left": $(this).offset().left, 
            "top": $(this).offset().top
        }).fadeIn(500);
        return false; 
    });

There is a picture showing the difference between intention and reality.

Answer

Michał Miszczyszyn picture Michał Miszczyszyn · Nov 19, 2012

It's because #container has position: relative;. Thus absolute settings of the email box are relative to the #container. You have to either remove the property or calculate the value of left with something like this: 

$(this).offset().left - $('#container').offset().left

Related questions

offsetTop vs. jQuery.offset().top

I have read that offsetLeft and offsetTop do not work properly in all browsers. jQuery.offset() is supposed to provide an abstraction for this to provide the correct value xbrowser. What I am trying to do is get the coordinates …

Read More
Using jquery to get element's position relative to viewport

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising: Get the current coordinates of the first element, or set the coordinates of …

Read More
Detecting offset of an element on scroll in javascript / jQuery

I am looking to calculate the distance between an element and the top of the document window. On scroll I am able to get the initial value but it does not change. How can I find this value and what …

Read More