Finding Div's Top-Left Corner Position

This article presents a JavaScript programmer's tool — for JavaScript programmers and those who want to learn the language.

There are likely to be times when you will need to know the exact position of a div or other HTML element. Two functions are provided in this article for determining the answer.

The reason you might want to determine the top-left corner of an element is likely to be nearly unique from anyone else's reason.

To find the position of an element, call one of the two functions with the element's id value.

Why two functions? Because there are two types of positions whenever a web page is longer than the viewport (the browser window where a web page is viewed).

1. To find the position within the viewport, use the FindTopLeftViewportPosition function.

2. To find the position within the document, use the FindTopLeftDocumentPosition function.

Let's suppose a web page is 2000 pixels high. And let's say the viewport shows 500 pixels of that. To see different parts of the web page, the viewport is scrolled.

Therefore, when you want to know the pixel position of an element, you'll be wanting either the position within the viewport or the position within the document. To get the position you want, call the applicable function with the id value of the element.

Here are the functions. They are copy and paste. No customization required.

<script type="text/javascript">
function FindTopLeftViewportPosition(id)
{
   var elementrect = document.getElementById(id).getBoundingClientRect();
   return { left:parseInt(elementrect.left+.5), top:parseInt(elementrect.top+.5) };
}
function FindTopLeftDocumentPosition(id)
{
   var elementrect = document.getElementById(id).getBoundingClientRect();
   var bodyrect = document.body.getBoundingClientRect();
   return { left:parseInt((elementrect.left-bodyrect.left)+.5), top:parseInt((elementrect.top-bodyrect.top)+.5) };
}
</script>

Here is an example using those two functions.

If you'll scroll the web page, you'll see one or both viewport numbers changing. (Scrolling up/down, changes the "Top" number. Sideways changes the "Left" number.)

Scrolling will only change the viewport data. The document coordinate numbers remain as they are. That's because the div remains in its position within the document even while the page is being scrolled to view different parts of the document.

The source code for the example is presented so you have working code to refer to when you use the two functions in your own projects.

<div id="element-for-testing" style="border:1px solid #ccc; border-radius:1em; padding:1em;">
Top-left coordinates within the viewport:
<br><span id="element-div-viewport">____</span>
<br><br>
Top-left coordinates within the entire document:
<br><span id="element-div-document">____</span>
</div>
<!-- Above is the div whose position is being determined. -->

<!-- This block of JavaScript gets the coordinates and posts them into the div. -->
<script type="text/javascript">
function DisplayCoordinates()
{
   var th = FindTopLeftViewportPosition("element-for-testing");
   var s = "Top:"+th.top+" Left:"+th.left;
   document.getElementById("element-div-viewport").innerHTML = s;
   th = FindTopLeftDocumentPosition("element-for-testing");
   s = "Top:"+th.top+" Left:"+th.left;
   document.getElementById("element-div-document").innerHTML = s;
}
window.addEventListener("scroll",DisplayCoordinates);
</script>

<!-- This block of JavaScript contains the functions provided by this article. -->
<script type="text/javascript">
function FindTopLeftViewportPosition(id)
{
   var elementrect = document.getElementById(id).getBoundingClientRect();
   return { left:parseInt(elementrect.left+.5), top:parseInt(elementrect.top+.5) };
}
function FindTopLeftDocumentPosition(id)
{
   var elementrect = document.getElementById(id).getBoundingClientRect();
   var bodyrect = document.body.getBoundingClientRect();
   return { left:parseInt((elementrect.left-bodyrect.left)+.5), top:parseInt((elementrect.top-bodyrect.top)+.5) };
}
</script>

No attempt will be made to explain what every part of the example does or why it is used. The example for JavaScript programmers, who I presume know how to look up things they need to know about the language. The purpose of this article is to provide the two coordinate-finding JavaScript functions.

However, a few things have been colored and bolded to help the eye find similar parts in the code. My thought was to make it seem less like a big block of ambiguous code.

• The color blue is the id value of the div whose position is determined.

• The color red marks the names of the functions provided for your use in this article.

• The bolded text notes the id values of the two places where the Top and Left coordinates are inserted.

With the two functions, FindTopLeftViewportPosition() and FindTopLeftDocumentPosition(), the coordinates of any type of HTML element can be determined. The coordinates of divs, paragraphs, spans, links, headings, ... can all be calculated.

(This content first appeared in Possibilities newsletter.)

Will Bontrager