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