Home | About Chris Hope | Contact Chris Hope | Search:

Get an element's position relative to the document with jQuery

Posted February 9th, 2010 in Javascript (Updated February 17th, 2010)

jQuery's .offset() method returns an offset containing the top and left co-ordinates of the element top-left position relative to the document as a whole. There's is also a .position() method which is supposed to return the offset relative to the offset parent but for me it always returns the same co-ordinates as .offset(). Maybe I'm doing something wrong with .position()...

Working example

The text below starts of saying "The offset co-ordinates are ..." and then the jQuery code replaces the ... with the actual co-ordinates. If you are reading this in a feed reader it will not work and you will need to click through to view this in a web browser.

The offset co-ordinates are ...

Getting the co-ordinates

The paragraph above has an id of "example-offset" so to get the offset co-ordinates do this:

var offset = $('#example-offset').offset();

The top co-ordinate is then offset.top and left co-ordindate offset.left . Alternatively if you only need to get a single co-ordinate (either top or left) and do not need to use the offset data again you could something along these lines:

var top = $('#example-offset').offset().top;

or

var left = $('#example-offset').offset().left;

Issues with non whole number offsets

When I was testing this out on a test page I only ever got whole numbers. When I added the above example to this page Firefox 3.5.3 told me the offset co-ordinates are 553.7166748046875, 273.5 but all other browsers returned whole numbers. I'm using the latest version of jQuery as at the writing of this post (1.4.1) so something odd is up.

It would therefore pay to round all numbers returned from .offset() just to be on the safe side, although whether you are best to round up (ceil), round down (floor) or just round I'm not sure. Whichever way you cannot be certain the co-ordinates are exactly correct so it will pay to use this function with caution. It could just be a buggy version of Firefox.

To round the numbers use Math.floor(). The actual code behind the working example above looks like this:

var offset = $('#example-offset').offset();
$('#example-offset span').html(Math.round(offset.top) + ', ' + Math.round(offset.left));

A note on .position()

According to the position() manual page .position() works the same way as .offset() but returns the co-ordinates relative to the offset parent. However, whenever I tried it I only ever got the same co-ordinates as for .offset().

I even tried using the example on the manual page and adjusted it by adding some content above where the position should be calculated, outside the offset parent. But I still got the same co-ordinates as for offset(). Maybe I'm doing something wrong?

If someone has also experienced this issue and knows what the solution is, or if you've had no issues using .position() please let me know sending me an email or in the comments below.

Further documentation and examples

Read the .offset() manual page for more details and examples.

Comments

blog comments powered by Disqus