 Melding volgens
schermresolutie
 Auteur:
Pieter Dejaeger
Link naar
forum:
http://www.jeugdwerker.eu/index.php?topic=150.0
 Tutorial
Op sommige sites kan het handig zijn om volgens de resolutie van de bezoeker
zijn of haar scherm een melding te geven.
Bezoekers krijgen op basis van hun schermresolutie de juiste link naar de site
te zien of krijgen een gewone melding.
Bijvoorbeeld bezoekers met een resolutie van 800*600 (of een andere resolutie)
krijgen de melding dat ze uw site niet goed kunnen bekijken en dat ze best een
andere resolutie kiezen.
Hieronder vind je het script.
Zoals je ziet krijgen bezoeker met een resolutie van 800*600 doorgestuurd naar
index_low.html, bezoekers met 1024*768 naar index_medium.html en alle anderen
naar index_high.html.
<div id="boodschap">
</div><br>
<script type="text/javascript">
<!--
if ((screen.width == 800) && (screen.height == 600))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_low.html'>Ga
Door naar de website</a></h2>"
else if ((screen.width == 1024) && (screen.height == 768))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
else
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_high.html'>Ga
Door naar de website</a></h2>"
//-->
</script>
Maar zoals ik al zei hoef je niet noodzakelijk met links te werken.
Je kan ook gerust met een gewone melding werken.
Bij onderstaande bewerking van de code krijgen enkel de bezoekers met een
resolutie van 800*600 een melding.
De rest krijgt niets te zien.
<div id="boodschap">
</div><br>
<script type="text/javascript">
<!--
if ((screen.width == 800) && (screen.height == 600))
document.getElementById("boodschap").innerHTML = "<h2>Uw schermresolutie is te
laag, kies een andere</h2>"
</script>
Extra mogelijkheden toevoegen aan de code is heel gemakkelijk.
Je kan het volgende zoveel keer als je wil erin zetten met andere waarden:
else if ((screen.width == 1024) && (screen.height == 768))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
Bijvoorbeeld:
<div id="boodschap">
</div><br>
<script type="text/javascript">
<!--
if ((screen.width == 800) && (screen.height == 600))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_low.html'>Ga
Door naar de website</a></h2>"
else if ((screen.width == 1024) && (screen.height == 768))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
else if ((screen.width == waarde) && (screen.height == waarde))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
else if ((screen.width == waarde) && (screen.height == waarde))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
else if ((screen.width == waarde) && (screen.height == waarde))
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_medium.html'>Ga
Door naar de website</a></h2>"
else
document.getElementById("boodschap").innerHTML = "<h2><a target='_self' href='index_high.html'>Ga
Door naar de website</a></h2>"
//-->
</script>
Kennis van JavaScript is dus niet noodzakelijk.
Gewoon een beetje je gezond verstand gebruiken.
Plaatsing van de code:
Je plaatst de code op de plaats waar je de melding wil krijgen.
Je plaatst deze code dan ook tussen <body></body>
Keer terug
|
