Getting HTML element screen position

In my struggle to make Bumblebee fit for documenting web sites using Selenium, I need to crop screen-shots to show only a certain element of a web page, e.g. a certain menu or a cell in a table, instead of showing the whole screen every time. In order to do so I need to know the position of an element relative to the screen.

This proved to be more difficult than I though, and this was how I eventually did it. It is not beautiful, e.g. it quickly opens and closes a window to get a reference, but it seems to work for my purposes in Firefox 2.  Inlined are comments to explain what is being done:

(note: some lines are wrapped for presentation)

<script type="text/javascript">
// Open a dummy window without navigation bar to
// get a reference.
dummy = window.open('url', 'windowname',
'height=200,width=200,status=0,toolbar=0,' +
'menubar=0,resizable=0,scrollbars=0');
// Calculate bottom bar height
bottomBarHeight = dummy.outerHeight-dummy.innerHeight;
dummy.close();
// Calculate the navigation bar height
topNavigationHeight =
  window.outerHeight-window.innerHeight-bottomBarHeight;

// Create a function to use repeatedly
function findScreenPos(obj) {
	// Calculate the total screen offset
	screenTopOffset = window.screenY
                          + topNavigationHeight;
	screenLeftOffset = window.screenX;
	pagePosition = findPos(obj);
	return [screenLeftOffset+pagePosition[0],
                screenTopOffset+pagePosition[1]];
}
// Gotten from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj && obj.offsetParent) {
	    do {
	         curleft += obj.offsetLeft;
	         curtop += obj.offsetTop;
	     } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}
</script>

Thanks to QuirksMode for the function that provides the position within the document.

If you know how to do this in a better (or more beautiful) way, please write a comment. I spent several hours on Google just to get here. 🙂