Moving

There is generally no compatibility problems when assigning a new location for your CSS-P element.

To move an element named "myelement" to the coordinate (100,50), you simply assign new left and top values:

myelement.left = 100
myelement.top = 50
But don't forget that myelement must be a pointer variable defined something like this:
function init() {
	if (ns4) myelement = document.myelementDiv
	if (ie4) myelement = myelementDiv.style
}

From now on, this will be inherent in all examples so don't forget!

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:

myelement.xpos = parseInt(myelement.left)
myelement.ypos = parseInt(myelement.top)

Now after this point, if you ever need to find out the left or top position, you just check the value of myelement.xpos and myelement.ypos respectively. Our new alert() would look like so:

alert(myelement.xpos + "," + myelement.ypos)

And The Catch?

When you want to change the location of the element, you FIRST have to change the values of xpos and ypos. THEN you set the left and top values equal to xpos and ypos respectively. For example:

function move() {
	myelement.xpos = 200
	myelement.ypos = -40
	myelement.left = myelement.xpos
	myelement.top = myelement.ypos
}

You must always keep the xpos and ypos values in synch with the left and top values. That way when you check myelement.xpos, you know that it will always be the same as myelement.left.

Click here to see an example using this technique.

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.

function moveTo(obj,x,y) {
	obj.xpos = x
	obj.left = obj.xpos
	obj.ypos = y
	obj.top = obj.ypos
}

To use the function is really easy - all you do is tell it what layer/object to use and the new x and y locations. For example, if you initialize your layer with:

if (ns4) mysquare = document.mysquareDiv
if (ie4) mysquare = mysquareDiv.style
mysquare.xpos = parseInt(mysquare.left)
mysquare.ypos = parseInt(mysquare.top)
Then to move the square to a new location you'd write:
moveTo(mysquare,50,100)

The moveBy() Function

MoveBy works exactly the same but instead of moving it directly to a new location it shifts the layer by a given number of pixels.

function moveBy(obj,x,y) {
	obj.xpos += x
	obj.left = obj.xpos
	obj.ypos += y
	obj.top = obj.ypos
}

To shift mysquare 5 pixels right, and 10 pixels up you'd write:

moveBy(mysquare,5,-10)

Click here to view an example

Home Next Lesson: Sliding
copyright 1998 Dan Steinman


Casa de Bender