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

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

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


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

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 element, but it is static and nested in a table. To the right is displayed the table 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.


            <TD WIDTH=100>&nbsp;</TD>
            <TD><IMG ID="redbox" SRC="redbox.gif"
                     WIDTH="200" HEIGHT="200"></TD>


All versions of NS6+ and Mozilla positioned the square correctly using our functions.

But only because we had specified a value of 0 for the table's BORDER attribute.

If we specify a BORDER value other than 0, the results would be different.

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/3.html

Justtechjobs.comFind a programming school near you

Online Campus Both