Snackbar / Toast
Dit is een Snackbar, ook bekend als Toast.
Sommige browsers, waaronder Edge onder Android, geven een melding als je een tabblad sluit. Iets dergelijks zie je bij sommige
websites, bijvoorbeeld als de pagina is geladen. Deze pagina heeft er ook een.
Klik op de knop hiernaast als je het effect nog een keer wilt zien.
Zo'n melding wordt Snackbar of Toast genoemd. Op deze pagina wordt beschreven hoe je dit maakt.
De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door de browsers Edge, FireFox en Chrome, alle onder Android, die een snackbar tonen
als je een tabblad sluit. Voor de code is dankbaar gebruik gemaakt van een
voorbeeld op w3schools.com.
- De werking van het script
- De code bestaat uit HTML, CSS en JavaScript.
- HTML
- De HTML van het voorbeeld bestaat uit één enkele <div>-tag met id=&qout;snackbar&qout;. Deze tag bevat de tekst in de snackbar.
- Binnen de <div>-tag kun je alle HTML-code kwijt die binnen een <div>-tag is toegestaan. Dat heeft wel tot gevolg dat de snackbar heel groot kan worden qua afmeingen. En dat is eigenlijk niet de bedoeling.
- Deze code staat het beste helemaal aan het begin van de <body>.
- CSS
- De opmaak van de snackbar loopt via de id snackbar. Rr wordt hier gekozen voor een id in plaats van een class, omdat de id ook wordt gebruikt voor de communicatie met JavaScript.
- Bij het laden van de pagina is de snackbar verborgen via visibility:hidden. Dat wordt door JavaScript veranderd in visibility:visible.
- De snackbar staat fixed gepositioneerd op 50% van links van de linker rand van het window en 30px van de onderkant van het window.
- De minimale breedte van de snackbar is 450px + 2 × horizontale padding (= 2 × 16px) = 482px. Om te zorgen dat de snackbar netjes in het midden staat, wordt deze over de helft van de breedte naar links verschoven. In het voorbeeld: margin-left:-241px.
- Om te zorgen dat de snackbar niet door het document wordt bedekt, is z-index:1 ingezet.
- Als de pagina is geladen en als er op de knop wordt geklikt, krijgt de snackbar de klasse show. Daardoor krijgt de snackbar visibility:visible. De snackbar wordt zichtbaar via de animatie fadein, die 0.5 seconde duurt. Daarna verdwijnt de snackbar weer in 0.5 seconde, na een delay van 2.5 seconden.
- De animatie verloopt via keyframes. Bij de fadein wordt bottom verhoogd van 0 naar 30px en wordt
opacity verhoogd van 0 naar 1. fadeout werkt precies andersom.
- JavaScript
- Het JavaScript bestaat uit één enkele function: toonSnackbar().
- Bij aanroep van deze function wordt de klasse show toegevoegd aan de snackbar. Die wordt na 3 seconden weer verwijderd. Dat gebeurt via een anonieme function, die met setTimeout() wordt uitgevoerd.
- Merk op dat de klasse show wordt toegevoegd aan / verwijderd uit de string className. Hiermeee wordt het attribuut class= van de HTML-tag gewijzigd. Je kunt op deze manier alleen elementen wijzigen als die maar één of geen klasse hebben. Als een element meerdere klassen heeft, moet je een andere aanpak volgen.
- Het is mogelijk om een lijst van alle klassen van een element op te vragen, die staat nl. in de lijst classList.
classList is readonly. Je kunt classList echter direct wijzigen met methodes zoals add() en remove().
- De function toonSnackbar() wordt gestart door op de knop te klikken of als de pagina is geladen, via window.onload.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven. Voor de goede orde: de knop is optioneel en is aan het voorbeeld toegevoegd om het effect eenvoudig te kunnen reproduceren. De knop zul je in de meeste gevallen weglaten.
- Pas de tekst van de snackbar aan.
- Pas de breedte van de snackbar aan zodat je eigen tekst er goed in past. Dit doe je door in het CSS-blok #snackbar de min-width en eventueel de horizontale padding te veranderen. Daarbij moet ook de margin-left worden meegenomen: margin-left = −½(width + padding-left + padding-right).
- Voorbeeld: De breedte width is hier 450px. De padding is 16px , dus padding-left = padding-right = 16px.dus min-width = −½(450px + 16px + 16px) = −½ × 482px = -241px;
- De kleuren van de snackbar kun je het beste ongemoeid laten, tenzij de achtergrond van je pagina heel donker is. Maak de achtergrond dan heel licht, met donkere letters. Gerruik bij voorkeur heel donkergrijs of zwart en (bijna) wit, dat werkt het beste.
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>).
<style>
#snackbar {
visibility: hidden;
min-width: 450px;
margin-left: -241px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
</style>
<script>
function toonSnackbar() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){
x.className = x.className.replace("show", "");
}, 3000);
}
window.onload = toonSnackbar;</script>
(Zet dit in de <BODY> bij voorkeur helemaal aan het begin.).
<div id="snackbar">Dit is een Snackbar, ook bekend als Toast.</div>
(De code van de knop:
<button onclick="toonSnackbar()" style="float:right; margin:20px 0 0 40px; color:navy; font-size:120%; font-weight:bold;">Toon Snackbar</button>
Downloaden:
Druk op de knop:
File: voorb679.zip, 749 bytes.
Opmerking:
Zie ook het item Meescrollende melding onderaan het scherm.
