JavaScript Animations, Part I: Retrieving the Element's Coordinates - Doc JavaScript

Retrieving the Element's Coordinates

A method that is only invoked by other methods of the same object is called an internal method (that's our own term for such a method). In other words, an internal method is one that the user normally doesn't call directly. Since you normally won't need to determine the coordinates of an animated elements, those methods are internal:

function left() {
  return parseInt(this.element.left);
}
function top() {
  return parseInt(this.element.top);
}

The expression this.element references the animated element's style object. For Navigator, the style object is simply the element itself, but since this.element already reflects the element's style object, we don't have to worry about it anymore.

The left() and top() functions return the element's distance from the left and top edges of the window (or the element's parent element, if it's nested). The parseInt() function converts the original value into an integer, because the value of the native left and top properties in Explorer is a string (e.g., "25px", standing for 25 pixels).

parseInt() parses a string argument and returns an integer of the specified radix or base. Its general syntax is as follows:

parseInt(string, radix)

It parses a string and attempts to return an integer in the specified radix (base). If radix is 10, it attempts to convert the string to a decimal number. For radixes above 10, the letters of the alphabet indicate numerals greater than 9. If parseInt() encounters a character that is not a numeral in the specified radix (e.g., p in "25px"), it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt() truncates floating-point numbers to integer values. If a radix isn't specified, the following is assumed:

• If string begins with "0x", the radix is 16.
• If string begins with "0", the radix is 8.
• If string begins with any other value, the radix is 10.

There are other ways to retrieve an element's coordinates as a number. In Navigator, left and top always return integer values (for positioned element). In Explorer, left and top always return string values, because they also indicate the units (e.g., "px" for pixels). As an alternative, we can use pixelLeft and pixelTop, which return integer values, just like Navigator's left and top properties. If the equivalent CSS properties are specified in pixels, posLeft and posTop can be used. They retrieve an element's position in the units specified by the corresponding CSS properties, left and top. Note that all these properties have a read-write permission, so you can use them to set an element's position. Now take a look at the following functions, which are equivalent to the previous left() and top():

function left() {
  return (NS4) ? this.element.left : this.element.pixelLeft;
}
function top() {
  return (NS4) ? this.element.top : this.element.pixelTop;
}

These functions simply return the left and top properties for Navigator, and pixelLeft and pixelTop for Explorer. You may replace pixelLeft and pixelTop with posLeft and posTop, respectively.

Created: April 21, 1998
Revised: April 21, 1998

URL: https://www.webreference.com/js/column18/lefttop.html