Section H. Dimensions and position of elements

H. Dimensions and position of elements

To wrap up this chapter, we will discuss how you can find an element's real dimensions and position in pixels.

Element dimensions

In some situations, you need to find the exact dimension of an elementand that includes the browser window. You can use a few properties that, though not part of any standard, are defined for all HTML elements in all browsers. They all yield a width or height in pixels.

The clientWidth and clientHeight properties give the width and height of the visible part of an element (i.e., CSS width + padding). They don't take borders or scrollbars into account, nor any possible scrolling.
The offsetWidth and offsetHeight properties give the total width and height that the element takes up in the page. The only difference from the previous property pair is that these two take into account the borders and scrollbars of an element.

Figure 9.5. What scrollTop, offsetWidth, scrollHeight, and clientWidth measure. (scrollLeft, off-setHeight, scrollWidth, and client-Height work the same, but in the other dimension.)
The scrollWidth and scrollHeight properties give the total width and height of the element as if it had overflow: visible. If this width and height are larger than the clientWidth and clientHeight, the element needs scrollbars.
The scrollTop and scrollLeft properties give distance (in pixels) that the element has scrolled. When you set these properties, the page scrolls to the new coordinates.

Therefore, the following gives the real width in pixels of the element with id="test":

document.getElementById('test').clientWidth;

To get the width of the borders and the scrollbars, use offsetWidth instead.

Finding the browser window's dimensions

Since these measurement-related properties are defined for all elements, they also work on <body> and <html>. In fact, it's on these elements that they're most commonly used. If you take the clientWidth and clientHeight of <body> or <html>, you find the visible width and height of the browser window, and that's useful in many scripts (though not in any of the example scripts).

As we saw in 8B, the <html> and <body> tags are represented by document.documentElement and document.body. Therefore, one of these lines will give you the browser window's width (without the scrollbars):

document.documentElement.clientWidth; document.body.clientWidth;

The second line is meant for Explorer versions earlier than 6, while the first line is meant for all other browsers. The difference is the interpretation of the <body> tag. In ancient times, the <body> element was the topmost visible element, and the <html> element remained hidden. However, modern browsers made <body> a normal block-level element, while <html> encompasses the entire browser window.

Figure 9.6. In Mozilla, the <html> element encompasses the entire browser window, while the <body> element is a normal block-level element. In Explorer 5.5, the <body> element encompasses the browser window, while the <html> element is invisible.

Hence, to read out the window's width and height, you have to query the clientWidth of the <html> element in modern browsers, but of the <body> element in older ones. Fortunately, that's simple:

var windowWidth = document.documentElement.clientWidth         || document.body.clientWidth;

Older Properties

In all browsers but Explorer, the older property pairs window.innerWidth/Height and pageXOffset/pageYOffset give the browser window's width and height and the scrolling offset, respectively. However, since all these browsers also support the clientWidth/Height and scrollTop/Left properties, there's no more need to use the old ones.

The window width is document.documentElement.clientWidth, but if that property is 0 or doesn't exist, we take document.body.clientWidth.

Element position

Occasionally, you want to find an element's position in the window. Edit Style Sheet needs this information when it wants to position the color picker right next to the link that says 'pick'; it has to know the position of this link.

Figure 9.7. The color picker should be positioned next to the link the user clicked on. To do this, the script needs to find the position of this link in the browser window.

Any element has two properties, offsetLeft and offsetTop, that give the offset of the element in pixels. The question is, of course, the offset relative to which element? The browsers disagree sharply on this. Explorer calculates the position of the Pick link relative to its parentNode (the <label> tag), while Mozilla calculates it relative to the div#container, because that's the first ancestor to have a CSS position other than static.

At first, this seems to be one of those unsolvable cross-browser incompatibilities. Fortunately, all browsers agree that the property offsetParent refers to the element relative to which the offset is calculated. In Explorer, the link's offsetParent refers to the <label>, but in Mozilla it refers to the div#container.

Parental Problems

The offsetParent function is not perfect, and although it'll work fine in 90% of the cases, sometimes it needs a bit of help.

One drawback is that the <body> and <html> elements don't have an offsetParent themselves, and thus no offsetWidth/Height. If you give either element a CSS margin or padding, this value may not be added to the calculated offset. Fortunately, I did not define any margin or padding to the <body> or <html> element in Edit Style Sheet.

In addition, the function doesn't work perfectly on elements with position: relative in Explorer.

See http://www.quirksmode.org/js/findpos.html for an overview of the problems you can expect, as well as a few test cases.

That means that we can jump from offsetParent to offsetParent without having to worry about their exact identity. We just follow the trail of offsetParents until we end up at the <body> or <html> tag.

We first calculate the link's offset relative to its offsetParent, and then we go to this offsetParent and add its offset relative to its own offsetParent, etc. When we're finished, we've found the link's offset relative to the <body> or <html> tag.

The findPos() function does so:

[Edit Style Sheet, lines 181-191]

function findPos(obj) {    var curleft = curtop = 0;    if (obj.offsetParent) {           while (obj.offsetParent) {              curleft += obj.offsetLeft;              curtop += obj.offsetTop;              obj  = obj.offsetParent;           }    }    return [curleft,curtop]; }

The return value of this function is an array (see 5L). The function first sets curleft and curtop to 0. If the offsetParent property does not exist, it returns [0,0]: calculation impossible.

Otherwise it enters a while() loop. While the current object has an offsetParent, it adds the offsetTop/Left of the current object to curleft and curtop, and then moves on to the offsetParent of the current object. The while() loop makes sure that it continues to do so until there is no more offsetParent.

Once this loop has ended, we find the element's offset relative to the <body> or <html> element.

findPos()'s results are used as follows:

[Edit Style Sheet, lines 138-142, condensed]

function placeColorPicker() {     var coors = findPos(this);     colorPicker.style.top = coors[1] - 20 + 'px';     colorPicker.style.left = 0;

findPos() returns an array, so coors becomes an array. In this specific example, the color picker ignores any left value but instead sets its left to 0. The element's top, though, is taken from findPos()'s results, 20 pixels are subtracted, and the 'px' unit is appended. Now the color picker appears to the left of the link the user clicked on.