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.πŸ™‚

4 Comments (+add yours?)

  1. qufighter
    Apr 05, 2010 @ 15:03:35

    This technique doesn’t seem to work for me at anything besides the default page zoom. If the user zooms their browser window using control-scroll or ctrl +/- then the innerHeight changes (webkit) which causes the top bar height calculation to become inaccurate. This seems like it should be a simple thing! Unfortunately there doesn’t seem to be any reliable way to determine the page scale when the document first loads or it would be possible to account for.

    Reply

    • danielbrolund
      Apr 05, 2010 @ 18:19:15

      Sorry to hear it doesn’t work for you.😦

      I’m not a javascript wizard, and I’ve only tried it for fairly simple cases, and mostly for automated purposes where there really is no need to resize/zoom. I wrote it up because I had a hard time finding something that worked for me.

      If you come up with something, ping this post and I’ll put a link here for all poor souls out there.

      Cheers
      Daniel

      Reply

  2. Dan Dascalescu
    Aug 31, 2012 @ 11:30:33

    HTML makes this way too difficult, and the right way to do it in a cross-browser way is to use a library like jQuery, dojo, or YUI.

    $(‘element-with-id’).top;

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: