Often there’s a need to determine absolute coordinates of an HTML element within a page, for example you need to display a popup menu on a button click at the button coordinates. Code for this is well known, here is one of the variations:

// Define class that will hold Object coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

// Get Top, Left coordinates of a DOM element
function GetTopLeft(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
 
   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;
   } while (oElem)
   
   return cTL;
}

This code is pretty straightforward: we’re looping thru all element’s ancestors, adding up each parent’s offsetTop and offsetLeft to get actual element coordinates.

This works well when your page is at the top level. But what if the page is inside of an IFRAME? Then the code above would give you coordinates of an element within the IFRAME window only. But what if you still need absolute coordinates of the element within browser window? Taking the example above – you need to display popup menu on the button clicked inside of IFRAME, but the menu can grow big and go outside of IFRAME boundaries. So the menu element need to be hosted outside of the IFRAME and coordinates need to be absolute withing browser window.

Let’s throw IFRAMEs into the mix: Continue reading →