">
Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


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 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.











Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service