Moving elements in NS 4

Recall in lesson 2 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.

<layer name="space" left=128>
<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=128
}
</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 Ican 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:

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 pixelWidth property of it's style object, the element moves.