| Advertentie |
|
| |
|
|
| |
| Domeinnaam nog vrij? |
|
|
| |
| Menu |
|
| |
| Leden |
|
| |
| Overige |
|
|
| |
|
|
| |
| Sitemasters |
|
| |
| Linkpartners |
|
|
| |
| Poll |
|
|
| |
| Statistieken |
|
|
| |
|
| Tutorials |
| Gegevens: |
|
Geschreven door: |
humor |
|
Moeilijkheidsgraad: |
Moeilijk |
|
Hits: |
5599 |
|
|
|
|
|
Een element binnen het zichtbare venster houden.
Navigatie
A. INFORMATIE VOORAF
1. Hoe bepaal je de afmetingen van het browservenster?
2. Hoe bepaal je de plaats van een element?
B. EEN ELEMENT BINNEN HET ZICHTBARE VENSTERGEDEELTE HOUDEN
1. Logo plaatsen
2. De rest van de code
A. INFORMATIE VOORAF
1. Hoe bepaal je de afmetingen van het browservenster?
Om de breedte en de hoogte van het browservenster te bepalen gebruikt
| NS4+ : window.innerWidth en window.innerHeight
IE4+ : document.body.clientWidth en document.body.clientHeight |
 top
2. Hoe bepaal je de plaats van een element?
Bepalen van de X,Y-coördinaten: de coördinaten 0,0 zijn deze van de linkerbovenhoek van het zichtbare gedeelte van het document in pixels, wanneer de scrollbalk helemaal bovenaan staat.
Beide browsers gebruiken weer een verschillende syntaxis :
| NS4+ : window.pageXOffset en window.pageYOffset
IE4+ : document.body.scrollLeft en document.body.scrollTop |
Bij het horizontaal scrollen wijzigt de x-waarde, bij het verticaal scrollen de y-waarde.
top
B. EEN ELEMENT BINNEN HET ZICHTBARE VENSTERGEDEELTE HOUDEN
Als voorbeeld wordt een 'logo' (een letter L) gebruikt:
1. Logo plaatsen
1. Plaats je logo binnenin een <DIV>-container.
| <div id="logo" style="position:absolute"><img src="logo.gif" width=28 height=28></div> |
top
2. De rest van de code
Gebruik de gewijzigde x,y-positie van het zichtbare gedeelte van het document in de linkerbovenhoek -en eventueel de browservensterafmetingen- om het element bij het scrollen van het document telkens opnieuw te plaatsen, zodat het steeds binnen het schermbereik blijft :
<script>
function plaatsing(){
if (document.all){
logo.style.left=document.body.scrollLeft+5
logo.style.top=document.body.scrollTop+5
}
else if (document.layers){
document.logo.left=pageXOffset+5
document.logo.top=pageYOffset+5
}
|
... en blijf dit herhalen door gebruik te maken van setTimeout() of setInterval() :
setInterval("plaatsing()",100);
onUnLoad=clearInterval;
</script>
|
In dit voorbeeld wordt het logo steeds afgebeeld op 5 pixels vanaf de bovenzijde en 5 pixels vanaf de linkerzijde van het zichtbare schermgedeelte.
Door een element binnenin een DIV-container te plaatsen, kun je dit met om 't even welk onderdeel van je pagina realiseren.
top
|
|
|
|
