Ben's Hobbyhoekje -- Een berichtenlezer zoals een fotogalerij

Een berichtenlezer zoals een fotogalerij

Op het moment dat dit bericht geschreven wordt, bestaat deze site op de kop af 22 jaar. In die tijd is er veel gebeurd. Niet alleen heeft …

Lees meer …

Niet alles wat je met een computer kunt doen móét ook met een computer. Soms (lees: vaker dan je denkt) werkt het beter om een ouderwets …

Lees meer …

Lorem ipsum dolor sit amet, consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost …

Lees meer …

Hierboven zie je een deel van een bericht. Als je op de link klikt of tikt verschijnt de rest van de tekst.
Onder het bericht zie je een navigatiebalkje, dat is opgebouwd uit rondjes en de tekens < en >. Elk rondje staat voor een bericht, de tekens < en > staan voor "vorige" resp. "volgende". Het rondje dat hoort bij het actieve bericht is blauw. De rondjes van de overige berichten zijn geel.
Je kunt zowel op de rondjes klikken, als op < en >.
N.B.: De eerste twee berichten bevatten 'echte' tekst. Het derde en vierde bericht bevatten "Lipsum".

De code staat onderaan de bladzijde. Je kunt hem downloaden om zelf te gebruiken.

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
Inspiratie voor dit item is ontstaan door mijnoverheid.nl. Voor deze site heb ik het nagebouwd.
De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
De werking van het script
De berichten staan in <div>-tags, elk met eigen id. Daarbinnen bevinden zich twee andere <div>-tags, één voor de korte en één voor de lange versie van het bericht. Omschakelen tussen beide versies gaat met de link onderaan.
Bij het wisselen van bericht wordt onthouden of er is ingesteld op de lange of op de korte versie.
Bij het starten van het programma is het eerste bericht zichtbaar. De andere berichten staan links naast het eerste bericht en zijn onzichtbaar door opacity op nul te zetten.
Als er op > (Volgende bericht) wordt getikt of geklikt kijkt het programma welk bericht zichtbaar is. Het volgende bericht wordt in beeld gebracht. Als het laatste bericht zichtbaar is, gebeurt er niets.
Als er op < (Vorige bericht) wordt getikt of geklikt kijkt het programma welk bericht zichtbaar is. Het vorige bericht wordt in beeld gebracht. Als het eerste bericht zichtbaar is, gebeurt er niets.
Een bericht wordt zichtbaar gemaakt of verborgen door het van rechts of van links in of uit beeld te schuiven, waarbij de opacity wordt verhoogd van 0 naar 1, of wordt verlaagd van 1 naar 0. Vooral in een breed window of scherm geeft dat een mooi effect.
Als er op een geel bolletje wordt getikt of geklikt, wordt het overeenkomende bericht zichtbaar gemaakt. Als er op het blauwe bolletje wordt geklikt, gebeurt er niets.
Als er van bericht wordt gewisseld, verandert het blauwe bolletje van plaats.
HTML
De HTML bestaat uit een enkele <div>-tag met id="container". Deze is opgemaakt en gepositioneerd met CSS. De code voor deze <div> staat bovenaan in de <body>. De berichten en de navigatiebalk staan in de container.
Voor elk bericht is er binnen de container een <div>-tag met id="no_x", waarin x een uniek volgnummer is. In het voorbeeld worden x = 0, 1, 2 en 3 gebruikt. Deze nummering begint bij nul, moet aaneengesloten zijn en mag dus geen gaten bevatten. Al deze tags hebben de klasse bericht, voor de opmaak.
Binnen de <div>-tags met id="no_x" bevinden zich twee andere <div>-tags met id="no_xKort" resp. id="no_xLang". Hierin staan de korte resp. de lange tekst van de berichten.
CSS-eigenschappen die moeten veranderen voor het verschuiven en zichtbaar maken van de berichten zijn als style-attribuut opgenomen in de <div>-tags. Het gaat om de eigenschappen left, opacity en display. Het is vaak niet mogelijk om de CSS-eigenschappen te wijzigen met JavaScript, op een andere manier dan via inline styles.
Chromium-browsers geven in het console een foutmelding op inline style attributen, maar volgens de HTML-specificaties is het correct.
De navigatiebalk staat in een <div>-tag met id="kiezer". Deze wordt met CSS op de onderkant van de container geplaatst.
Bij het starten van het programma bevat de navigatiebalk alleen de tekens < en >. Voor het eerste bericht wordt blauwe bolletje er tussen gezet. Voor de overige berichten worden gele bolletjes gezet.
De navigatiebalk wordt alleen zichtbaar gemaakt als er minstens twee berichten zijn.
Bovenaan de pagina moet voldoende ruimte worden vrijgehouden voor de korte tekst van de berichten. De handigste manier om dat te doen is door de marge van de eerste regel tekst groot te maken. In het voorbeeld is dat 140px.
CSS
De CSS dient alleen voor de opmaak en de positionering. Er worden geen animaties mee gemaakt, dat wordt gedaan door JavaScript.
CSS-eigenschappen die worden veranderd door JavaScript zijn opgegeven in style-attributen. Zie ook de opmerkingen onder het kopje HTML.
De breedte van container is 500px. De position is fixed bovenaan het window. Om het te centreren, is een oude truc gebruikt: De container wordt gepositioneerd op 50% vanaf links, en daarna 50% naar links verschoven.
De hoogte van container is groter dan de hoogte van het korte bericht, om ruimte te maken voor de navigatiebalk.
De achtergrond van de container is transparant.
De z-index is 1. De container bevindt zich dus boven het document.
De berichten zelf worden opgemaakt met de klasse bericht. Elk bericht heeft ook een id, dat wordt gebruikt om de hoogte in te stellen. bericht is absoluut gepositioneerd binnen container, in de linker bovenhoek. Er is een rand met afgeronde hoeken. box-sizing is border-box, om de opmaak wat gemakkelijker te maken.
Er is een padding om te tekst niet helemaal tegen de rand aan te laten lopen.
De z-index is 2. De berichten bevinden zich dus boven de container, en daarmee boven het document.
De navigatiebalk heeft id="kiezer". Bij het laden van pagina is de balk onzichtbaar via display:none. Als er minimaal twee berichten zijn wordt de balk door JavaScript zichtbaar gemaakt.
De breedte van de balk begint op 100px. Voor elk bericht wordt die groter gemaakt.
De navigatiebalk wordt op de onderrand van container gefixeerd met bottom, en binnen container gecentreerd op dezelfde manier als container wordt gecentreerd in het document.
Ook hier is box-sizing:border-box gebruikt om de opmaak wat gemakkelijker te maken.
De z-index is 3. De navigatiebalk bevindt zich dus boven de container, ook boven de berichten, en daarmee boven het document.
JavaScript
Alle animaties en andere respons op gebruikers worden gedaan door JavaScript. Daarvoor is een zestal functions gemaakt die hieronder de revue passeren.
Zodra de pagina is geladen wordt de function initKiezer() uitgevoerd via window.onload. Deze function telt het aantal berichten. Dat gaat met document.getElementsByClassName('bericht').length. Als er meer dan één bericht is wordt er voor elk bericht een bolletje tussen de tekens < en > in de navigatiebalk ingevoegd. Blauw voor het eerste (= zichtbare) bericht en geel voor de rest. Daarbij wordt ook de navigatiebalk zichtbaar gemaakt.
Voor het wisselen tussen de korte en lange versies van de berichten zijn er de functions toonMeer() en toonMinder(), waarvan de namen voor zichzelf spreken. Deze functions hebben één parameter: xx. Dat is het volgnummer van het bericht waarvan Kort naar Lang, of omgekeerd, wordt gewisseld. De status wordt bewaard in de variable Meer.
De function vorigBericht() wordt aangeroepen als er op < wordt geklikt. Als het huidige bericht het eerste bericht is, doet de function niets, anders wordt toonBericht aangeroepen om het vorige bericht te laten zien.
De function volgendBericht() wordt aangeroepen als er op > wordt geklikt. Als het huidige bericht het laatste bericht is, doet de function niets, anders wordt toonBericht aangeroepen om het volgende bericht te laten zien.
De function toonBericht() wordt aangeroepen door vorigBericht(), volgendBericht() of als er op een bolletje wordt geklikt.
Als er op het blauwe bolletje wordt geklikt, gebeurt er niets. Als er op een geel bolletje wordt geklikt, wordt het bericht dat hoort bij het gele bolletje getoond. Als Meer de waarde true heeft, wordt toonMeer() aangeroepen om naar het lange bericht te wisselen.
Als een bericht wordt gewisseld schuift het nieuwe bericht in van links en verdwijnt het huidige bericht naar rechts; dat geldt als het nieuwe bericht een hoger volgnummer heeft dan het huidige. Dat wordt geregeld door de function scrollVanLinks(), die het bericht een stapje van moveStep naar rechts schuift. Om te zorgen dat het bericht van links naar rechts kan schuiven, wordt het eerst 500px links van de linkerrand van de container gezet. De opacity is nul, dus je ziet het niet. Bij elk stapje wordt de opacity verhoogd met moveStep/500.
scrollVanLinks wordt met setInterval() elke 0.015 sec. aangeroepen. Als de linkerrand van het nieuwe bericht de linkerrand van de container heeft bereikt, wordt clearInterval aangeroepen. Daardoor stopt de beweging.
Het window wordt bij elke stap bijgewerkt door werkSchermBij().
Voor de beweging van rechts naar links is er de function scrollVanRechts(). Die werkt net als scrollVanLinks(), maar dan precies de andere kant op.
De functions scrollVanLinks(), scrollVanRechts() en werkSchermBij() vallen binnen de scope van toonBericht(), waardoor ze niet van buiten toonBericht() kunnen worden aangeroepen.
Inbouwen in je eigen site
Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
Pas de CSS aan voor de kleuren en andere opmaak van de berichten. Om de kleuren van de tekens <, > en de bolletjes te veranderen is grafische software nodig omdat de tekens en de bolletjes in .png bestanden zitten.
De afmetingen van de berichten zijn hard geprogrammeerd. Wijziging vraagt ingrepen in de CSS en in het JavaScript.
Vervang de teksten van het voorbeeld door je eigen teksten.
Berichten verwijderen doe je door de hele <div>-tag met id="no_x" te verwijderen, samen met de CSS van no_x. De administratie wordt automatisch meegenomen.
Als het verwijderde bericht niet het laatste bericht is, moet je de overblijvende berichten hernummeren om te zorgen dat er geen gaten in de nummering ontstaan. Het gaat hier om no_x, no_xKort, no_xLang en de aanroep van toonMeer() en toonMinder().
Berichten toevoegen doe je door een <div>-tag met id="no_x" in de code op te nemen. Als het nieuwe bericht niet het laatste in de reeks is, moet er worden hernummerd zoals hiervoor is beschreven.
Tenslotte:
Dit effect is primair bedoeld voor het voorblad van een website, waar weinig informatie op staat. Dit omdat de mededeling permanent in beeld is.
Dit effect komt het beste tot zijn recht als er twee of drie berichten zijn. Daarboven wordt de hoeveelheid informatie te groot.

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="script.js"></script>

(Zet dit bovenin de <BODY>).

<div id="container">
<div class="bericht" id="no_0" style="left:0; opacity:1">
<p id="no_0Kort" style="display:block">Op het moment dat dit bericht
geschreven wordt, bestaat deze site op de kop af 22 jaar. In die tijd is
er veel gebeurd. Niet alleen heeft …<br> <br>
<a href="javascript:toonMeer('0')">Lees meer …</a></p>

<p id="no_0Lang" style="display:none">Op het moment dat dit bericht geschreven wordt, bestaat deze site op de kop af 22 jaar. In die tijd is
er veel gebeurd. Niet alleen heeft internet zich stormachtig ontwikkeld,
ook deze site heeft de nodige
.
.
.
en internet. Beide items zijn verwijderd omdat ze door de tijd zijn
ingehaald en omdat het niet meer te onderhouden was.
<br>
 <br>
<a href="javascript:toonMinder('0')">Verberg deze tekst</a></p>
</div>

<div class="bericht" id="no_1" style="left:-500px; opacity:0">
<p id="no_1Kort" style="display:block">Niet alles wat je met een
computer kunt doen móét ook met een computer.
Soms (lees: vaker dan je denkt) werkt het beter om een ouderwets
…<br> <br>
<a href="javascript:toonMeer('1')">Lees meer …</a></p>

<p id="no_1Lang" style="display:none">Niet alles wat je met een
computer kunt doen móét ook met een computer.
Soms (lees: vaker dan je denkt) werkt het beter om een ouderwets
stukje papier te pakken en een potlood of balpen.<br>
.
.
.
soms hilarische, voorvallen beschreven waar het gebruik van een
computer niet echt helpend was.<br>
 <br>
<a href="javascript:toonMinder('1')">Verberg deze tekst</a></p>
</div>

<div class="bericht" id="no_2" style="left:-500px; opacity:0">
<p id="no_2Kort" style="display:block">Lorem ipsum dolor sit amet,
consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost
…<br>
 <br>
<a href="javascript:toonMeer('2')">Lees meer …</a></p>

<p id="no_2Lang" style="display:none">Lorem ipsum dolor sit amet,
consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation llamco laboris nisi ut
.
.
.
ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
 <br>
<a href="javascript:toonMinder('2')">Verberg deze tekst</a></p>
</div>

<div class="bericht" id="no_3" style="left:-500px; opacity:0">
<p id="no_3Kort" style="display:block">Lorem ipsum dolor sit amet,
consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost
…<br>
 <br>
<a href="javascript:toonMeer('3')">Lees meer …</a></p>

<p id="no_3Lang" style="display:none">Lorem ipsum dolor sit amet,
consectetaur adipisicing velit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation llamco laboris nisi ut
.
.
.
ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
 <br>
<a href="javascript:toonMinder('3')">Verberg deze tekst</a></p>
</div>

<div id="kiezer" style="width:100px">
<img src="dot-left.png" title="Vorige bericht" style="height:15px;
width:15px; border:0" onclick="vorigBericht()">  
<span id="bolletjes"></span>
<img src="dot-right.png" title="Volgende bericht" style="height:15px;
width:15px; border:0" onclick="volgendBericht()">
</div>
</div>

Downloaden:

Druk op de knop: File: voorb729.zip, 4714 bytes.

Opmerking:

Als je de mogelijkheid om lange/korte berichten te hebben zou weglaten, is deze aanpak ook geschikt als fotogalerij.