//DHTML API
/*als pagina geladen is, moet de functie init worden uitgevoerd*/
if(document.addEventListener)
{
window.addEventListener('load', init, false); //W3C
}
else if(document.attachEvent)
{
window.attachEvent('onload', init); //IE
};
/*met de functie addEventHandler() kan je aan een element een event
handler koppelen.
Het aanroepen gebeurt als volgt: addEventHandler('laag1', 'click', start)
*/
function addEventHandler(el, ev, fun)
{
var x = null;
if(el == document)
{
x = el;
}
else {
x = document.getElementById(el);
};
if(document.addEventListener)
{
x.addEventListener(ev, fun, false); //W3C
}
else if(document.attachEvent)
{
ev = 'on' + ev;
x.attachEvent(ev, fun); //IE
};
}
/*----------------------------------------------------------------------------------------------------------------
Hieronder staan enkele nuttige functies om bepaalde CSS-eigenschappen te wijzigen
-----------------------------------------------------------------------------------------------------------------*/
/*met de functie moveObject() kan je een object verplaatsen
naar een willekeurige positie, alsook de z-index te veranderen.
Het aanroepen gebeurt als volgt: moveObject('laag1', 150, 300, 4)
Je kan ook gewoon één van de drie parameters wijzigen door de
andere op de waarde null te plaatsen.
*/
function moveObjectTo(el,x,y,zIndex)
{
var ob = document.getElementById(el);
if(x != null) ob.style.left = x + "px";
if(y != null) ob.style.top = y + "px";
if(zIndex != null) ob.style.zIndex = zIndex;
}
/*mbv de functie setVisibility() kan je de css-eigenschap visibity
wijzigen. Het aanroepen kan op verschillende manieren:
setVisibility('laag1', 'visible')
setVisibility('laag1', true)*/
function setVisibility(el, vis)
{
var x = document.getElementById(el);
if (vis==true ||vis=='visible' ||vis=='y')
{
x.style.visibility = 'visible';
}
else
{
x.style.visibility = 'hidden';
};
}
/*mbv de functie setDisplay() kan je de css-eigenschap display
wijzigen. Het aanroepen kan op verschillende manieren:
setDisplay('laag1', 'block')
setDisplay('laag1', false)*/
function setDisplay(el,dis)
{
var x = document.getElementById(el);
if (dis==true || dis=='block' || dis=='y')
{
x.style.display = "block";
}
else if (dis==false || dis=='n')
{
x.style.display = "none";
}
else
{
x.style.display = dis;
};
}
/*mbv de functie changeAttributeValue() kan je de waarde van een attribuut
van een element wijzigen. Het aanroepen gebeurt op volgende manier:
changeAttributeValue('laag1', 'src','images/laag1.gif')*/
function changeAttributeValue(el, att, value)
{
var x = document.getElementById(el);
x.setAttribute(att,value);
}
/*----------------------------------------------------------------------------------------------------------------
Hieronder staan enkele nuttige functies om bepaalde CSS-eigenschappen uit te lezen
-----------------------------------------------------------------------------------------------------------------*/
/*met de functie getStyle() kan je waarden van CSS-eigenschappen
uitlezen en deze dan verder bewerken in JavaScript. Het aanroepen
gebeurt als volgt: getStyle('laag1', 'fontFamily', 'font-family')
*/
function getStyle(el,IEstyleProp, CSSstyleProp)
{
var x = document.getElementById(el);
var y;
if (x.currentStyle) //IE hier moet de CSS-eigenschap zoals in JS worden opgegeven bv. fontFamily
{
y = x.currentStyle[IEstyleProp];
}
else if (window.getComputedStyle) //W3C hier moet de CSS-eigenschap zoals in een CSS-bestand worden opgegeven bv. font-family
{
y = document.defaultView.getComputedStyle(x,null).getPropertyValue(CSSstyleProp);
};
return y;
}
/*met de functie getElementPosition() kan je bepalen waar een laag
gepositioneerd is tov de linkerbovenhoek van je browservenster
voor de top-waarde: getElementPosition('laag1').top
voor de left-waarde: getElementPosition('laag1).left
*/
function getElementPosition(el)
{
var offsetTrail = document.getElementById(el);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail)
{
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
};
if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined")
{
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
};
return {left:offsetLeft, top:offsetTop};
}
/*mbv onderstaande functie kan je de afmetingen van het browservenster uitlezen
voor de hoogte: getWindowSize().height
voor de breedte: getWindowSize().width
*/
function getWindowSize()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
};
return {width:myWidth, height:myHeight};
}
/*mbv onderstaande functie kan je de positie van de muiscursor uitlezen
voor de x-waarde: getMouePosition(event).x
voor de breedte: getMousePosition(event).y
*/
function getMousePosition(event)
{
var posx = 0, posy = 0;
if (!event) var event = window.event;
if (event.pageX) //W3C
{
posx = event.pageX;
posy = event.pageY;
}
else if (event.x) //IE
{
posx = event.x;
posy = event.y;
};
return{x:posx, y:posy};
}
/*mbv onderstaande functie kan je de toets die een gebruiker indrukt van
het toetsenbord uitlezen
voor de unicode: getKeyboardCode(event).unicode
Dit geeft een getal terug:
- voor de letters is dit van 48 ('a') tem 57 ('z'),
- voor de pijltjestoetsen van 37 tem 40 (links,boven,rechts,onder), voor de spatiebalk
is dat 32.
- voor de getallen van 48 tem 57 (van cijfer 0 tem 9)
voor het karakter: getKeyboardCode(event).charcode (als je op de 'a' drukt dan
krijg je hier ook de letter 'a' terug als resultaat)
*/
function getKeyboardCode(event)
{
if(!event) var event = window.event;
var code1 = event.charCode ? event.charCode : event.keyCode;
var code2 = String.fromCharCode(code1);
return {unicode:code1, charcode:code2};
}// JavaScript Document