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

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.



Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Oct 07, 2002
Revised: Oct 07, 2002

URL: http://www.webreference.com/dhtml/diner/realpos2/10.html