Inzoomen op content
Voor bepaalde toepassingen is het handig als je kunt inzoomen op de content op een deel van de pagina. Er staat nadrukkelijk: een deel. Het gaat dus niet over de hele pagina. Als je daarop wilt inzoomen gebruik je de muis en/of het toetsenbord, zoals beschreven in het item Tekengrootte veranderen met de muis en het toetsenbord.
Hier onder zie je een kader met wat Lipsum. Er onder staat drie knoppen. Als je op + klikt, wordt de tekst groter. Als je op - klikt, wordt de tekst kleiner. Als je op 0 klikt, gaat de tekst terug naar zijn oorspronkelijke grootte
Lorem ipsum dolor sit amet, consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Op deze pagina wordt uitgelegd hoe je dit doet. De code staat onderaan deze pagina. je kunt hem ook downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in eigen site.
- De werking van het script
- De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file zoom-content.js). De HTML en de CSS moet je zelf nog aanpassen. Aan het JavaScript hoeft in principe niets te worden gewijzigd.
- De HTML bestaat uit een geneste <div>-tag. Dit is de container waarbinnen nog HTML-code staat voor het opmaken van de tekst en waar het zoom-effect plaats vindt.
- De container heeft de klasse blok. Het staat relatief gepositioneerd ten opzichte van het document, heeft een width en een height en een border. Door de marges links en rechts op auto te zetten, staat het gecentreerd in het document.
- Binnen blok staat een <div> met id="box". Die wordt gebruikt als 'kapstok' voor het in- en uitzoomen. Dat effect wordt bereikt door met JavaScript de waarde van de schaal-factor aan te passen.
- De tekst zelf staat binnen de box, in een <h4>-tag. Die kun je opmaken zoals je zelf wilt. Op deze
pagina is h4 gebruikt, maar je kunt hier in principe alle HTML neerzetten die je wilt. Het gedrag met plaatjes is echter
onzeker. Beter is het je hier te beperken tot tekst.
- De drie knoppen zijn gemaakt met <button>-tags. Ze staan buiten de container, maar zijn wel samengevoegd in een <div>-tag die ze samen gecentreerd in het document zet. De knop met de + heeft id="zoomIn", de knop met de - heeft id="zoomOut, de knop met de 0 heeft id="zoomNul.
- De knoppen worden opgemaakt met CSS. Als je op een knop klikt wordt er een eenvoudige JavaScript function uitgevoerd,
die de CSS-eigenschap scale van de box aanpast.
- Tenslotte is er nog het JavaScript. Dat verwerkt de acties n.a.v. de klikken op de knoppen. Het werkt als volgt:
- Er is een variabele zoom, met de beginwaarde 1.
- Als de pagina is geladen wordt aan de knop met id="zoomIn" een event-handler toegevoegd, die reageert op een muisklik. Die verhoogt de waarde van zoom met 0.2, maar zoom wordt nooit groter dan 2. De nieuwe waarde van zoom wordt ingesteld in de CSS van box, als waarde van transform:scale().
- Tegelijkertijd wordt aan de knop met id="zoomOut" een gelijksoortige event-handler toegevoegd. Die verlaagt zoom met 0.2, maar zoom wordt nooit kleiner dan 0.2. Ook hier wordt zoom ingesteld als waarde van transform:scale() in box.
- Tenslotte wordt aan de knop met id="zoomNul" een gelijksoortige event-handler toegevoegd. Die stelt zoom in op de beginwaarde (= 1). Ook hier wordt zoom ingesteld als waarde van transform:scale() in box.
- Inbouwen in je eigen site
- Download de code en pak de .zip-file uit.
- Bouw de code in in je eigen code, zoals hieronder is aangegeven.
- Pas de HTML en CSS aan voor je eigen website.
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>).
<link rel="stylesheet" href="styles.css">
<script src="zoom-content.js"></script>
(Zet dit in de <BODY> op de plaats waar het tekstblok moet verschijnen).
<div class="blok">
<div id="box">
<h4>Lorem ipsum dolor sit amet, … ut labore et dolore magna
aliqua.</h4>
</div>
</div>
<div align="center">
<button id="zoomIn">+</button>
<button id="zoomNul">0</button>
<button id="zoomOut">-</button>
</div>
Downloaden:
Druk op de knop:
File: voorb523.zip, 1127 bytes.
Opmerking:
Een andere methode om in te zoomen op content wordt beschreven in het item Lettergrootte
en -opmaak wijzigen.
