As I said, there is no compatibility issues with assigning a new location, however there is a problem when capturing the current location of an element. It's due to fact that IE stores it's locations with a "px" at the end of the values (as seen in the Cross-Browser Javascript example).

To get rid of the "px" you can parse the value into an integer.

So instead of just writing

myelement.left

You have to write

parseInt(myelement.left)

For example, if you wanted to pop up an alert of the current left and top location you'd write:

alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))

Adding New Properties

Now believe me, to always have to write parseInt() before all your variables will tend to get very annoying. You will soon ask yourself if there is a better way... and I think I have a pretty good answer to that.

There is nothing stopping you from adding more properties onto our pointer variable, or object, as I will tend to call it from now on.

What I suggest you do, is keep the current location of the element in separate properties aside from the left and top properties. To make these new properties you just directly assign them. I'd start by setting them to actual location:

Not too difficult right? This idea will be the basis for everything I'll show in future examples. It may seem a little dumb to have these extra variables but once you get into more complicated things you'll find this technique does help smooth out your code.

Aside:You may be wondering why am using xpos and ypos as my properties instead of just x and y... Well I did that for a reason. It is a little known fact that Netscape has already included these properties into CSS-P. I found that if you use x and y then your values will always be stored as integers. Now you may think "who cares?"... but there are instances where you need to store the current left and top positions with more than just integers (ie. real numbers with decimals and everything) and this is just not possible if you use x and y.

Generic Move Functions

In that last example I "hard-coded" the movements - I wrote separate functions for each movement. Now of course if you want to move many different layers to various locations you don't always want to keep writing more functions. So what we can do is create some generic functions that will take care of most types of movements.

The moveTo() Function

The moveTo() function takes your layer/object and moves it directly to a new location.