DHTML Lab - DHTML Diner - Element Page Coordinates, Part 2 | 2

Determining Element Page Coordinates, Part 2
IE for Windows and TABLEs

function DL_GetElementLeft(eElement)
{
   if (!eElement && this)                    // if argument is invalid
   {                                         // (not specified, is null or is 0)
      eElement = this;                       // and function is a method
   }                                         // identify the element as the method owner

   var DL_bIE = document.all ? true : false; // initialize var to identify IE
                                     
   var nLeftPos = eElement.offsetLeft;       // initialize var to store calculations 
   var eParElement = eElement.offsetParent;  // identify first offset parent element                            
   while (eParElement != null)                 
   {                                         // move up through element hierarchy
      if(DL_bIE)
      {
         if(eParElement.tagName == "TD")     // if parent a table cell, then...
         {
            nLeftPos += eParElement.clientLeft; // append cell border width to calcs
         }
      }

      nLeftPos += eParElement.offsetLeft;    // append left offset of parent
      eParElement = eParElement.offsetParent; // and move up the element hierarchy
   }                                         // until no more offset parents exist
   return nLeftPos;                          // return the number calculated
}
    
function DL_GetElementTop(eElement)
{
   if (!eElement && this)                    // if argument is invalid
   {                                         // (not specified, is null or is 0)
      eElement = this;                       // and function is a method
   }                                         // identify the element as the method owner

   var DL_bIE = document.all ? true : false; // initialize var to identify IE
                                     
   var nTopPos = eElement.offsetTop;       // initialize var to store calculations 
   var eParElement = eElement.offsetParent;  // identify first offset parent element                            
   while (eParElement != null)                 
   {                                         // move up through element hierarchy
      if(DL_bIE)
      {
         if(eParElement.tagName == "TD")     // if parent a table cell, then...
         {
            nTopPos += eParElement.clientTop; // append cell border width to calcs
         }
      }

      nTopPos += eParElement.offsetTop;    // append top offset of parent
      eParElement = eParElement.offsetParent; // and move up the element hierarchy
   }                                         // until no more offset parents exist
   return nTopPos;                          // return the number calculated
}
   
      

The functions can be called in either of two ways:

elementReference.getTrueXPosition = DL_GetElementLeft;
elementReference.getTrueYPosition = DL_GetElementTop;
var nMyElementsTrueXPosition = elementReference.getTrueXPosition();
var nMyElementsTrueYPosition = elementReference.getTrueYPosition();

or:

var nMyElementsTrueXPosition = DL_GetElementLeft(elementReference);
var nMyElementsTrueYPosition = DL_GetElementTop(elementReference);

The functions are currently intended for use in IE for Windows and NS6+.

In the next installment, we'll discuss element position with TABLEs in NS6+, and further fine-tune the functions.

Our aim is to build on the functions above until they can return the position of any element possible in any browser, under any styling conditions.