Coding In Paradise

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 (http://qooxdoo.sf.net). 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 = rect.top;
   h = rect.bottom - rect.top;
}

el.x = x;
el.y=y;
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.