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

Determining Element Page Coordinates, Part 4
IE Win - Final Comments

Bordered Static Elements

Our examples follow the same routine as those in Part 3.

To wit:

Just below is a blue square. It is a solid-color positioned image element.

Below the blue square are two buttons. As labelled, one causes the blue square to be repositioned. The other brings the square back to its original position.

Below the buttons is a red square. It, too, is a solid-color image element, but it is static and nested in another HTML element. Below the red square is displayed its parent element HTML for your reference.

The purpose of our exercise is to determine the page position of the red square, using the current functions, and reposition the blue square on top of it using the values returned from the functions.

Behind the scenes, the code looks something like this:

BlueSquareReference.style.left = DL_GetElementLeft(RedSquareReference) + "px";
BlueSquareReference.style.top  = DL_GetElementTop(RedSquareReference)  + "px";

All of the examples in this article follow the same guidelines.

Now, position the blue square by clicking on the large button.

Disabled  Disabled

<P STYLE="border:5px green solid;
          padding:10px;">
    <IMG ID="redbox"
         SRC="redbox.gif"
         WIDTH="200" HEIGHT="200">
&lt/P>
        

Result

Our position calculations are correct in both directions. The border width of the containing element (<P>) does not affect the calculations because the element is not in the element offset hierarchy (see Part 1 for discussion of element hierarchies.)

But even a static element can be made part of the element hierarchy.