DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1

Determining Element Page Coordinates, Part 1
IE for Windows, NS6

Over four years ago (May, 1998) when the fourth generation browsers (NS4 and IE4Win) were the "new kids on the block," we published one of our most popular articles:

In that article, we introduced the getRealLeft() and getRealTop() functions, which have found their way into countless Web pages and applications.

Since then we have seen many new versions of IE and NS and the "new kid" moniker now applies to then-unknown products from other vendors like Opera and Konqueror.

The present series of articles is not an "update" of the previous one, but rather an all-new expanded re-write, covering all DHTML browsers currently available.

Introduction

Our aim in these articles is to create a series of JavaScript functions that you may use to determine the page position of any HTML element, positioned or static, that exposes position information about itself. We will begin by looking at IE for Windows and NS6+ (Mozilla), browsers which expose some position information about all HTML elements. Other browsers will follow in future articles.

Why?

Why do we need to know the page position of elements, especially static elements?

Every author has their reasons, but certainly the most popular one is:

the need to position dynamic content relative to static content

We can all relate to this problem. For example, we have a DHTML pop-up (like an HM menu) that we want placed relative to an in-page static element, like an image. How do we know where the image is on the page?

Oddly enough, only NS4 exposes the page position of an image (but little else) and we will discuss that in a future article. The present article will deal with IE4+ for Windows and NS6+, which do not expose the page position. We have to do some work to figure it out.

So, let's start working.