DHTML Lab - DHTML Diner - Element Page Coordinates, Part 3 | 6 | WebReference

DHTML Lab - DHTML Diner - Element Page Coordinates, Part 3 | 6


Determining Element Page Coordinates, Part 3
NS6+, Mozilla and TABLEs

TABLE as offsetParent

In our discussion of the offsetParent property and element hierarchies in Part 1, we pointed out that prior to NS7, the TD and TABLE elements were not considered elements that defined coordinate systems, as they were in IE, and therefore were not identified as offset parents. The properties and attributes of tables did not affect the calculation of element position.

In NS7 and Mozilla 0.9.7+, we see that tables are considered offset parents and the coordinate system they define begins within any border the table might have. This is in contrast to IE which disregards the table border when defining the coordinate system.

We must, consequently, add the border value to any position calculations we make for NS7 and Mozilla 0.9.7+.

Our functions can be modified to read:

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 browser is IE, then...
      {
         if(eParElement.tagName == "TD")     // if parent a table cell, then...
         {
            nLeftPos += eParElement.clientLeft; // append cell border width to calcs
         }
      }
      else                                   // if browser is Gecko, then...
      {
         if(eParElement.tagName == "TABLE")  // if parent is a table, then...
         {                                   // get its border as a number
            var nParBorder = parseInt(eParElement.border);
            if(nParBorder > 0)               // if a border width is specified, then...
            {
               nLeftPos += nParBorder;       // append the border width to counter
            }
         }
      }

      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 browser is IE, then...
      {
         if(eParElement.tagName == "TD")     // if parent a table cell, then...
         {
            nTopPos += eParElement.clientTop; // append cell border width to calcs
         }
      }
      else                                   // if browser is Gecko, then...
      {
         if(eParElement.tagName == "TABLE")  // if parent is a table, then...
         {                                   // get its border as a number
            var nParBorder = parseInt(eParElement.border);
            if(nParBorder > 0)               // if a border width is specified, then...
            {
               nTopPos += nParBorder;        // append the border width to counter
            }
         }
      }

      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
}

We do not need to identify which Gecko browser version is being used. Only NS7 and Mozilla 0.9.7+ consider tables in the element hierarchy, so the statement

eParElement.tagName == "TABLE"

can only evaluate to true in these browsers.

We are not finished, however. We should look at the FRAME and RULES attributes of TABLEs, and see if they can affect our calculations.



Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/diner/realpos3/6.html