Programmeren voor aanraakschermen:
Een uitgewerkt voorbeeld
Op deze pagina kun je lezen hoe je zoiets aanpakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken, inclusief het plaatje.
Voor de goede orde: Het gaat hier alleen om het verslepen van het plaatje door de beweging van een vinger, op een aanraakscherm. Het scherm kan zijn van een een PC, laptop, tablet of een mobiele telefoon. Als aan dat apparaat een muis is gekoppeld, kun je het plaatje niet verslepen met de muis. Daar zijn andere technieken voor.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- De werking van het script
- De code bestaat uit HTML, CSS en JavaScript.
- HTML
- De HTML bestaat uit een enkele <div>-tag met de klasse wapper, met daarbinnen de <img>-tag voor het plaatje.
- De wapper dient als drager voor het plaatje bij het laden van het document. De bijbehorende CSS beperkt de bewegingsruimte van het plaatje, zodat het niet buiten de randen van het browserwindow kan komen.
- Het plaatje heeft id="draggable". In de CSS worden de afmetingen vastgelegd en ook een essentiële
eigenschap: position: absolute. Verder wordt het id gebruikt voor de communicatie met JavaScript.
- Om een plaatje te 'versleepbaar' te maken hoef je geen speciale maatregelen te nemen. In HTML zijn de tags <a>
(anchor; hyperlink) en <img> (image; plaatje) per default al draggable (versleepbaar). Andere
elementen maak je versleepbaar door het globale attribuut draggable="true" op te nemen in de tag.
- CSS
- De CSS voor het voorbeeld bestaat uit de klasse wapper en het id draggeble.
- wrapper zorgt voor de positionering van het plaatje in het document bij het laden en heeft daarom position relative.
- De hoogte is 200px, gelijk aan de hoogte van het plaatje. De breedte is 110%. Daarmee wordt voorkomen dat het plaatje
buiten het browserwindow wordt geschoven.
Als het plaatje andere afmetingen heeft, moeten width en height worden aangepast.
Als width kleiner is dan 100% gaat het document verschalen als het plaatje te ver naar rechts wordt gesleept. - draggable definieert de afmetingen en de rand van het plaatje: 200px × 200px en geen rand. Verder wordt het
plaatje gepositioneerd in de linker bovenhoek van de wrapper.
De positionering is absolute. Dit moet expliciet worden opgegeven, anders werkt het niet.
- JavaScript
- Het voorbeeld bevat twee stukjes JavaScript:
• De melding bovenaan de pagina, die zegt dat je het plaatje kunt verschuiven met je vinger (als je een aanraakscherm hebt), of dat het voorbeeld niet zal werken (omdat je gëën aanraakscherm hebt).
Dit staat in <body> van het HTML-document, op de plaats waar de melding moet verschijnen. Dit gebruikt de techniek die wordt beschreven in het item Aanraakscherm detecteren.
Tegelijk met de melding wordt een <div>-tag gemaakt met id="waarIsDeVinger". Hier worden de coördinaten van het aanraakpunt van de vinger op het scherm gezet.
• Het verslepen van het plaatje. Die code zet je in de <head> en wordt hieronder besproken.
- Het script wordt uitgevoerd zodra de pagina is geladen. Dat gaat met een event listener die reageert op "load".
- De listener kijkt eerst of er een aanraakscherm beschikbaar is. Als dat niet het geval is stopt de uitvoering. Als er
wel een aanraakscherm is, wordt er een verwijzing naar het id draggable opgeslagen in de variabele draggable.
Ook worden de afmetingen van het plaatje vastgelegd in de variabelen imgSizeX en imgSizeY.
Om een of andere reden is het niet mogelijk om de afmetingen van het plaatje op te halen uit de CSS. Weet je waarom? Stuur me een mailtje! - Vervolgens wordt aan draggable event-listener gekoppeld voor het event touchmove. Dit event wordt afgevuurd als met een vinger over het scherm wordt geveegd. In dit geval werkt het als het plaatje wordt versleept met een vinger-beweging.
- De event-listener haalt een lijst op van objecten die o.a. de coördinaten bevat waar de vinger het scherm raakt, en zet het eerste element van die lijst in de variabele touch. De gezochte ördinaten staan in touch.pageX en touch.pageY. Dit zijn gebroken getallen. Ze worden als geheel getal op het scherm gezet.
- Tenslotte worden de style-attributen left en top van draggable (lees: het plaatje) aangepast: het plaatje verplaatst zich t.o.v. het document.
- Het plaatje wordt in horizontale richting verplaatst naar de coördinaat touch.pageX + imgSizeX / 5 × 3, gemeten in pixels.
- Het plaatje wordt in verticale richting verplaatst naar de coördinaat touch.pageY + imgSizeY × 5 / 3, gemeten in pixels.
- Door de correcties imgSizeX / 5 × 3 en imgSizeY × 5 / 3 wordt het plaatje ongeveer in het midden aan de bewegende vinger "gekoppeld". Daarmee wordt ook voorkomen dat het plaatje buiten het browserwindow wordt geschoven. In een site met frames (zoals deze) is het mogelijk het plaatje buiten het frame te schuiven, waarbij het onder de content van een ander frame kan verdwijnen. Om het weer zichtbaar te maken moet het frame waar het plaatje in staat worden ververst.
- De factoren 3/5 en 5/3 zijn proefondervindelijk bepaald. Mogelijk zijn ze afhankelijk van de hoogte breedte van het scherm.
Ik heb dit niet kunnen verifiëren. Weet je hoe dit in elkaar steekt? Stuur me een mailtje!
- Inbouwen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Voor een productie-site kun je de melding over het al of niet beschikbaar zijn van een aanraakscherm eventueel weglaten.
- Pas de CSS aan voor de afmetingen van de afbeelding die je gaat gebruiken: height in wrapper en draggable,
width alleen in draggable .
N.B. de afbeelding hoeft niet vierkant te zijn. - Pas de waarden van imgSizeX en imgSizeY aan in het JavaScript, voor de afmetingen van de afbeelding.
- Tenslotte
- Voor een goede website zou je dit voorbeeld moeten combineren met het verslepen van elementen met de muis, zoals is beschreven in o.a. de items Plaatjes en tekst verplaatsen en Figuur in een Viewport (Draggable Content).
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
.wrapper {
position:relative;
width:110%;
height:200px;
}
#draggable {
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
border:0;
}
</style>
<script>
window.addEventListener("load", function() {
if ("ontouchstart" in document.documentElement) {
var draggable = document.getElementById('draggable');
var imgSizeX = 200;
var imgSizeY = 200;
draggable.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
var str = "Coördinaten van het aanraakpunt in het document
(X<b>→</b>, Y<b>↓</b>): " + parseInt(touch.pageX,10)
+ ", " + parseInt(touch.pageY,10);
document.getElementById('waarIsDeVinger').innerHTML = str;
// Place the element where the finger is
draggable.style.left = touch.pageX - imgSizeX/5*3 + 'px';
draggable.style.top = touch.pageY - imgSizeY*5/3 + 'px';
event.preventDefault();
}, false);
};
});
</script>
(Zet dit in de <BODY> op de plaats waar de coördinaten moet verschijnen).
<p id="Melding" style="text-align:center">
<script>
if ("ontouchstart" in document.documentElement) {
document.getElementById('Melding').innerHTML = "Het plaatje hieronder
kun je verschuiven door het te verslepen met je vinger."
document.getElementById('Melding').innerHTML += "<div
id=\"waarIsDeVinger\">Coördinaten van het aanraakpunt in
het document (X<b>→</b>, Y<b>↓</b>): --, --</div>";
} else {
document.getElementById('Melding').innerHTML = "<b
style=\"color:maroon; font-weight:bold\">Om het voorbeeld te
kunnen bekijken is een aanraakscherm nodig. Op dit scherm werkt
het dus niet.</b>";
}
</script>
</p>
(Zet dit in de <BODY> op de plaats waar het plaatje moet staan als de pagina wordt geladen).
<div class="wrapper">
<img src="animate01.jpg" id="draggable">
</div>
Downloaden:
Druk op de knop:
File: voorb324.zip, 14 690 bytes.
Opmerking:
Er is ook een versie van dit script waarbij de foto is opgesloten in een viewport. Zie het item:
Programmeren voor aanraakschermen: Afbeelding in een viewport.
