WEBalley - dhtml - moving elements

DHTML - moving elements

intro
netscape
internet explorer
dynamic content
< moving elements >
cross browser
resources

Moving elements around in the document
If you like working with animations, you'll be glad to know that with DHTML, the entire web page is now your drawing board! You can create content that fly all over the screen freely. In Netscape, this is done by manipulating the left and top attributes of the <layer> tag. In IE 4, the same thing is accomplished by altering the pixelLeft and pixelTop properties of the style object.

Moving elements in NS 4
Recall in that layers support the left and top property, which controls its offset from the document's upper left corner. Well, by using simple math and a couple of lines of script, we can dynamically update these properties so the layer moves! The below example changes the left property of a layer so it moves horizontally when a button is pressed.

space ship

<layer name="space" left=35>
<img src="TN00018A.gif">
</layer>
<script>
function moving(){
if (document.space.left<1000)
document.space.left+=5
moveid=setTimeout("moving()",50)
}
function come_back(){
clearTimeout(moveid)
document.space.left=35
}
</script>

<form>
<input type="button" value="Move" onClick="moving()">
<input type="button" value="Come back" onClick="come_back()">
</form>

See, all I did was continuously add to the left property of "space" to move it, and set the property back to its original value when I want the layer returned back to its initial location.

Moving elements in IE 4
By the way, the day when NS and IE agree upon one implementation of DHTML is the day I can stop writing two versions of everything (just letting out a little frustration). Moving an element in IE 4 involves basically first wrapping that element either inside a positioned span or div, then changing the span or div's pixelLeft and pixelTop properties. It sounds complicated, but is actually very simple:

<div id="spaceship" style="position:relative">
<img src="TN00018A.gif">
</div>
<script>
function moving2(){
if (spaceship.style.pixelLeft<1000)
spaceship.style.pixelLeft+=5
moveid2=setTimeout("moving2()",50)
}
function come_back2(){
clearTimeout(moveid2)
spaceship.style.pixelLeft=0
}
</script>

<form>
<input type="button" value="Move" onClick="moving2()">
<input type="button" value="Come back" onClick="come_back2()">
</form>

What I did first was set the outside <div> called "spaceship" to a position of relative, which is necessary to make the element movable (you could also set it to a value of "absolute"). Then, by manipulating the pixelLeft property of it's style object, the element moves.