Find the distance between HTML element and browser (or window) sides

javascript jquery html position distance
Kai picture Kai · Jan 5, 2011 · Viewed 48.6k times · Source

How to find the distance in pixels between html element and one of the browser (or window) sides (left or top) using jQuery?

Answer

T.J. Crowder picture T.J. Crowder · Jan 5, 2011

You can use the offset function for that. It gives you the element's position relative to the (left,top) of the document:

var offset = $("#target").offset();
display("span is at " + offset.left + "," + offset.top + 
  " of document");

Live example On my browser, that example says that the span we've targeted is at 157,47 (left,top) of the document. This is because I've applied a big padding value to the body element, and used a span with a spacer above it and some text in front of it.

Here's a second example showing a paragraph at the absolute left,top of the document, showing 0,0 as its position (and also showing a span later on that's offset from both the left and top, 129,19 on my browser).

Related questions

Event to detect when position:sticky is triggered

I'm using the new position: sticky (info) to create an iOS-like list of content. It's working well and far superior than the previous JavaScript alternative (example) however as far as I know no event is fired when it's triggered, which …

Read More
Set the caret position always to end in contenteditable div

In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More