In dit voorbeeld leer je hoe je een element kan verplaatsen naar een absolute positie.
Het is enkel een kwestie van de eigenschappenleft en top van het elemenent in te stellen.
In de voorgestelde code kan je aan de functie verplaatsNaar een element, x-positie en een y-positie meegeven. Je kan dus zelf opgeven welk element je wenst te verplaatsen.
Bekijk het voorbeeld: 
Toon /verberg
<HTML>
<HEAD>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<LINK href="vb.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
var blok
function initieer(){
blok = new getObj('roodblok');
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function verplaatsNaar(elem,xpos,ypos)
{
if (!DHTML) return;
elem.style.left = parseInt(xpos); //Firefox vereist hier parseInt
elem.style.top = parseInt(ypos);
}
// -->
</script>
</HEAD>
<BODY onload="initieer()">
<h1>Absolute verplaatsing</h1>
<br><a href="javascript:verplaatsNaar(blok,100,20)">Naar 100,20</a>
<br><a href="javascript:verplaatsNaar(blok,100,150)">Naar 100,150</a>
<br><a href="javascript:verplaatsNaar(blok,150,50)">Naar 150,50</a>
<br><a href="javascript:verplaatsNaar(blok,300,300)">Naar 300,300</a>
<div id="roodblok" style="position:absolute;width:40px;height:40px;top:100px;left:100px;background-color:red"></div>
</BODY>
</HTML>
Een (voorlopig?) vreemde vaststelling is dat bewegen van elementen in FireFox niet lukt als bovenaan de DTD-regel is opgenomen.
In dit voorbeeld leer je hoe je een element kan verplaatsen relatief ten op zichte van de huidige locatie van het element.
Hier werd nadat we een objectvariabele hebben aangemaakt met de functie getObj (eigeschappen obj en style), het object nog voorzien van twee extra eigenschappen: xpos en ypos. Deze eigenschappen bevatten de initiële waarden voor de left en top eigenschappen. De functie parseInt wordt gebruikt omdat in Internet Explorer deze waarden een suffix 'px' hebben. Hier moeten we vanaf, willen we met deze waarden rekenen.
Bekijk het voorbeeld:
Toon /verberg
<HTML>
<HEAD>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<LINK href="vb.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
var blok
function initieer(){
blok = new getObj('roodblok');
blok.xpos = parseInt(blok.style.left);
blok.ypos = parseInt(blok.style.top);
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function verplaatsMet(elem,x,y)
{
if (!DHTML) return;
elem.xpos += x;
elem.ypos += y;
elem.style.left = elem.xpos;
elem.style.top = elem.ypos;
}
// -->
</script>
</HEAD>
<BODY onload="initieer()">
<h1>Relatieve verplaatsing</h1>
<br><a href="javascript:verplaatsMet(blok,20,0)">Met 20,0</a>
<br><a href="javascript:verplaatsMet(blok,-20,0)">Met -20,0</a>
<br><a href="javascript:verplaatsMet(blok,0,40)">Met 0,40</a>
<br><a href="javascript:verplaatsMet(blok,0,-40)">Met 0,-40</a>
<br><a href="javascript:verplaatsMet(blok,20,40)">Met 20,40</a>
<div id="roodblok" style="position:absolute;width:40px;height:40px;top:100px;left:100px;background-color:red"></div>
</BODY>
</HTML>
In voorgaande voorbeelden leerde je hoe je een element kan verplaatsen op de pagina. Het element wordt onmiddellijk op de gewenste positie getoond. Soms wil je een element 'glijdend' naar de doelpositie laten bewegen, zodat de gebruiker het element ziet bewegen.
Als je deze toepassing opent in frames zal je eerst het juiste document de focus moeten geven.
Toepassing: glijden met de pijltjestoetsen
De gebruiker kan een element naar links en naar rechts laten glijden met behulp van de pijltjestoetsen.
De toepassing:
Toon /verberg
<HTML>
<HEAD>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<LINK href="vb.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
var blok
document.onkeydown = keyDown;
function initieer(){
blok = new getObj('roodblok');
blok.xpos = parseInt(blok.style.left);
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function keyDown(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which
var sprong = 5;
if(code == 39){ // code 39: pijl rechts
glijden(sprong);
}
if(code == 37){ // code 37: pijl links
glijden(-sprong);
}
}
function glijden(waarde){
blok.xpos += waarde;
blok.style.left = blok.xpos;
window.status = blok.xpos; //voor de lol
}
// -->
</script>
</HEAD>
<BODY onload="initieer()">
<h1>Glijden</h1>
Gebruik de pijltjestoetsen om naar links of rechts te glijden.
<div id="roodblok" style="position:absolute;width:40px;height:40px;top:100px;left:100px;background-color:red"></div>
</BODY>
</HTML>
Timer
Je zal soms ook elementen laten bewegen terwijl de gebruiker daarvoor geen actie blijft ondernemen. Bijvoorbeeld: de gebruiker drukt op een knop start om de animatie te starten, en drukt op stop om de animatie te stoppen.
Om routines uit te voeren binnen een tijdsinterval kan je in Javascript gebruik maken van twee gelijkaardige functies:
window.setInterval(functie,tijd);
window.setTimeOut(functie,tijd);
Waarbij de tijd wordt opgegeven in milliseconden.
Toepassing: glijden met een timer
Een element beweegt over de pagina wanneer de gebruiker op een knop drukt. De gebruiker kan de animatie stoppen door op een andere knop te drukken.
De toepassing:
Toon /verberg
<HTML>
<HEAD>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<LINK href="vb.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
var blok
function initieer(){
blok = new getObj('roodblok');
blok.xpos = parseInt(blok.style.left);
blok.actief = false;
blok.waarde = 5;
blok.grensR = 300;
blok.grensL = 100;
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function begin(){
blok.actief = true;
glijden();
}
function stop(){
blok.actief = false;
}
function glijden(){
if(blok.actief){
if(blok.xpos > blok.grensR || blok.xpos < blok.grensL){
blok.waarde = -blok.waarde;
}
blok.xpos += blok.waarde;
blok.style.left = blok.xpos;
window.status = blok.xpos; //voor de lol
window.setTimeout("glijden()",30);
}
}
// -->
</script>
</HEAD>
<BODY onload="initieer()">
<h1>Glijden</h1>
<div id="roodblok" style="position:absolute;width:40px;height:40px;top:100px;left:100px;background-color:red"></div>
<p>
<input type="button" value="start" onclick="begin()">
<input type="button" value="stop" onclick="stop()">
</BODY>
</HTML>
