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 ='url', 'windowname',
'height=200,width=200,status=0,toolbar=0,' +
// Calculate bottom bar height
bottomBarHeight = dummy.outerHeight-dummy.innerHeight;
// Calculate the navigation bar height
topNavigationHeight =

// 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],
// Gotten from
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];

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.


    • 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.



  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.



Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: