Determining Div Location

This is a techy how-to article about measurements related to div locations and dimensions.

Listing all the reasons to know the information would be a long list. Getting the dimensions of a div element for use when centering the div within the viewport is one reason. It is also how I used it just yesterday.

There are various ways to try to determine the location of a div in the viewport (browser window, generally, but might also be an iframe). Similar to its dimension, there are various ways to determine the width or the height of a div.

The ways are JavaScript methods. PHP doesn't work for this functionality because PHP runs before the web page is loaded into a browser window.

The JavaScript function I prefer to use provides the viewport location and the dimensions of a div all in one function call. getBoundingClientRect is the name of the function.

This example displays the locations and dimensions within the div the getBoundingClientRect function measures. (Scrolling this page will change the numbers.)

The values returned by getBoundingClientRect include any padding and borders the div has. If you need measurements for only the content, subtract the padding and border widths from the values returned.

Locations and dimensions returned by getBoundingClientRect may be integers or decimals. The above example rounds decimals to their nearest integer value.

To use the getBoundingClientRect function, you need to know the div's id value. For examples in this article, let's assume myDiv is the div's id value.

To use the getBoundingClientRect function and its return values, first call the function and then access the values. This example shows how to call the function and display an alert with the div's left-side location.

<script type="text/javascript">
var stats = document.getElementById("myDiv").getBoundingClientRect();
alert( stats.left );
</script>

To call the getBoundingClientRect function, replace myDiv with the id value of the div you want to measure. You see that on the first line of the working code.

On the second and third lines of the working code, stats is the variable where the measurements are stored. You may change the variable name.

On the second line, left is the inner value of the stats variable to access. In this case, the value is provided to an alert box.

The value in the alert box may be changed. Here are all the available values.

stats.left   // the left side of the div.
stats.x      // also the left side of the div.
stats.right  // the right side of the div.
stats.top    // the top edge of the div.
stats.y      // also the top edge of the div.
stats.bottom // the bottom edge of the div.
stats.width  // the width of the div.
stats.height // the height of the div.

To reiterate, the way I generally get the location and dimension values of a div with the getBoundingClientRect function. Then access the numbers I need from the function's return value as described above.

(This content first appeared in Possibilities newsletter.)

Will Bontrager