Moving Layers - the Top and Left Properties

The top and left properties of a CSS block rule represent how many pixels from the top and left of a browser window an element is.

While the CSS syntax for these properties is the same for all browsers that support positioning, the JavaScript reference and even the data type these values are classified as is NOT the same in these very browsers. This makes assigning values to these properties in a cross-browser scenario a bit complicated (shocking, isn't it?).

The Netscape 4.x property names are top and left and are treated as numbers in its DOM. Internet Explorer refers to them as pixelTop and pixelLeft, and also treats them as numbers. However, IE's DOM also includes two other properties called top and left which represent the same coordinates, but those values are classified as strings and include "px" in the returned value. The latter names and classifications also apply to Netscape 5 ("Netscape 5" is returned by the appName and appVersion properties in NN6 +).

Try viewing this page in different browsers and using the following alert to see what is returned:
alert the value returned for top and left
NOTE: The style rule for the block element in this example does not declare a top and left value. Unless an element's top/left values are initially set in its style rule, JavaScript will return an empty string for those values in IE/NN6. Invoking the function in this example sets those values, so you will have to click the links at the top of the page before testing the above alert in those browsers.

To keep from having to branch code into three separate blocks, these examples forget about IE's pixelTop and pixelLeft numbers, and use the string values of top and left supported by both IE and Netscape 5.

The example function takes 3 arguments: the name of the layer, and the top (y) and left (x) values. The first argument (id) is passed back to the global browser sniffing function, which is returned as the browser-varying path to the block element. Then the layer's top and left coordinates are set to x and y, repositioning the layer.

**NOTE: this script requires the browser sniffing script from the previous section in order to function properly.

function moveLayer(id,y,x) {

var layer = browser(id) // get browser specific path to block element

   if(nn4){
   layer.top = x
   layer.left = y
   }
   else{
   layer.style.top = x
   layer.style.left = y
   }

}

All three arguments are defined when the moveLayer function is called:

<a href="javascript:moveLayer('blockDiv',50,100)">move to 50,100</a>

If the goal is to add to or subtract from a block's current position as in the next example, a little data type conversion is neccessary for IE and NN6+. Because these values are returned as strings for these browsers, the parseInt() method must be invoked on these properties in order to convert these values to numbers, allowing us to add or subtract from them.

But since all we want to do here is assign a specific position, we can skip converting the values and simply assign a value to the properties. For IE and NN6+, the values assigned to the top and left coords can be numbers or strings, and can include "px". For Netscape 4.x though, the values to be assigned must be numbers, therefore the arguments for this example function are passed as numbers.

Netscape Navigator has a built-in moveTo method that can be used to do the same thing, but to have a global function that moves a layer is just as good.