Entry

How do I dynamically position objects (in different browsers)?

How do I move objects?

How do I use CSS position attributes to move objects?

May 22nd, 2000 01:59
Rey Nuņez, http://members.xoom.com/_XMCM/rvnunez/abkd/museo/positioning/diagbasics.html

Moving HTML elements basically just entails assigning a new location 
for the element. For example, let's start by establishing a reference 
to a DIV element with an ID="divID"

  theDiv = document.all ? document.all['divID'] : 
document.getElementById ? document.getElementById('divID') : 
document.layers['divID'];
  theDiv = document.layers ? theDiv : theDiv.style

To move the element to the x,y (left,top) coordinates 
of 50,75, we simply assign the new left and top values to the object:

  theDiv.left = 50
  theDiv.top = 75

By repeatedly calling a function that moves the location of the object 
in small increments, simple animated movements can easily be done. The 
key is in learning how to apply the basic positioning concept above.

For example, assuming we have defined a variable posX to refer to the 
object's starting X position, or the object's initial left coordinate.

  posX = 0

Then the expressions:

  posX += 5
  theDiv.left = posX

will move our object's left position 5 pixels horizontally, in this 
case, to the right. If we had posX -=5, it will move to the left. Then, 
to move it dynamically, we wrap these statements into a function that 
loops:

function moveFromLeft(end){
if (posX < end){
  posX += 5
  theDiv.left = posX;
  setTimeout(moveFromLeft,30)
  }
}

"end" refers to the stop position where the loop ends, which can be 
declared earlier, or calculated by a function, for example, for the 
move to stop at the middle of the screen.

Similarly, that function can be applied to the top position as well, 
which will move our object vertically (posY += moves down, while posY -
= moves up).

function moveFromTop(end){
if (posY < end){
  posY += 5
  theDiv.top = posY;
  setTimeout(moveFromTop,30)
  }
}

where posY is a variable that refers to our object's starting Y 
position, or the object's initial top coordinate.

Now, if we want to move an object in both left and top positions, the 
move function has to increment in both x and y directions.

function glideDownRight(inc,end){
if (posY < end){
  posX += inc;
  posY += inc;
  theDiv.left = posX;
  theDiv.top = posY;
  setTimeout(glideDownRight,30)
  }
} 

Notice another parameter now in that function. "inc" refers to the step 
increment, or how much in pixels the move will step through, which may 
be specified.

This link shows an example that works cross-browser (IE4/5, NN4/6):
http://members.xoom.com/_XMCM/rvnunez/abkd/museo/positioning/xybasics.ht
ml

This link shows a similar example, but this time moving objects 
diagonally (IE4/5, NN4/6):
http://members.xoom.com/_XMCM/rvnunez/abkd/museo/positioning/diagbasics.
html

All of the move functions are available in an external script file 
(move.js), which you are free to download, study, modify and use. Enjoy!