DHTML Tutorial
What is DHTML?
The layer Tag
DHTML in IE
Dynamic Content
Moving Elements
Cross-browser
Examples


Free Tutorials
Internet
What is Internet
Internet Games
Learn TCP IP
HTML
Learn HTML
Learn DHTML
Learn CSS
Learn XML
Learn XHTML
Learn WML
Database
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Programming
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt

Moving elements


Next Next




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="soft.jpg">
</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="soft.jpg">
</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 we 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.



Next Next





|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |



2013 Soft Lookup Corp. Privacy Statement