This is my personal blog. The views expressed on these pages are mine alone and not those of my employer.

Friday, September 09, 2005

Erik Arvidsson and Sebastian Werner Give Alternatives For Positioning Elements on Screen

Thanks to two readers of Coding in Paradise, Erik Arvidsson and Sebastian Werner, I learned in response to yesterdays article on how to position things on the screen two good alternatives for positioning elements.

From Erik:

"There are two things that are very useful in IE and Mozilla. In IE element.getClientRect() and in Gecko document.getBoxObjectFor(element). The box object in Moz is still a bit buggy but it is less buggy than using recursive offsetLeft/offsetParent/scrollLeft."

Sebastian also alerted me to a toolkit that solves some of these issues:

"Have you ever tried QxDOM from qooxdoo ( There is a whole API which try to use the fastest and best method for every browser to detect dimensions, etc. (It also use getClientRect or getBoxObjectFor as Eric has mentioned) You should be able to use this, without the other qooxdoo things."

I had never heard of either getClientRect or getBoxObjectFor, so it was great to learn about these alternative methods. In terms of documentation I found something on MSDN covering getClientRects, with an s; the page that lead to it also had a compendium of DHTML methods supported in Internet Explorer, including many I had never known about before; I'll have to study this page some more.

Erik, you should write up a short tutorial going into these methods some more; I would enjoy reading that.

Searching around for more info, I found some good template code in a discussion that covers using these two methods:

function getPos(el) {
var x,w,y,h;
if (document.getBoxObjectFor) {
var bo = document.getBoxObjectFor(el);
x = bo.x;
w = bo.width;
y = bo.y;
h = bo.height;
else if (el.getBoundingClientRect) {
var rect = el.getBoundingClientRect();
x = rect.left;
w = rect.right - rect.left;
y =;
h = rect.bottom -;

el.x = x;
el.w= w;
el.h = h;
alert("Left: " + x + "\rTop: " + y + "\rWidth: " + w + "\rHeight: " + h);

I wonder how these methods work in Internet Explorer 6+ when you shift the browser into the strict doctype, which causes IE to use the correct calculations when determining an elements bounding box for CSS.

The problem with this method IMHO is, that it detects the browser features with every call, which is not so good to perform well.

Better is to define two functions with the same name inside a if-else around them.

I have not the detailed problems in my head currently. But these both methods does not return the same values and so it is not so easy to write a cross-browser method for this. Try to addings borders and paddings to the nodes and their parents and take a look if the values are correct after this, too. If I remind me correctly this should not be so.
Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]