Ben's Hobbyhoekje -- Gele plakbriefjes op je scherm

Gele plakbriefjes op je scherm

Bij het openen van deze pagina staan er twee gele 'kadertjes' op het scherm. Je kunt ze vergelijken met de bekende, meestal gele, plakbriefjes die op vrijwel elk bureau wel voorhanden zijn. Omdat ze de tekst gedeeltelijk afdekken en omdat de kleur behoorlijk afwijkt van de rest van de pagina, trekken ze de aandacht.

Het plakbriefje bovenaan verdwijnt vanzelf, na ca. 10 seconden. Het briefje rechtsonder verdwijnt pas als je de de link "Sluiten >>" aanklikt.

Op deze pagina wordt uitgelegd hoe je dit doet. De code van het voorbeeld kun downloaden.
Het script is gemaakt door Dynamic Drive. Die site bestaat niet meer.
De bespreking beperkt zich tot een beknopte opsomming van de mogelijkheden van het script en het toepassen in je eigen site.

Elk plakbriefje wordt gemaakt met een combinatie van HTML, CSS en JavaScript:
- Maak een object van het type stickynote. Lees meer over zelf objecten maken.
- Maak CSS om het plakbriefje op te maken. Merk op dat het plakbriefje verborgen is bij het openen van de pagina.
- Maak HTML aan, hetzij in de <body> (zoals bij id="stickynote1", rechts onder), hetzij in een apart tekstbestand (zoals bij id="stickynote2", midden boven).
  De keuze tussen HTML in het document of een apart bestand maak je door source:'inline' respectievelijk source:'filenaam' te kiezen. Bij stickynote2 is de file stickydata.txt gebruikt.
  Als je de inhoud van een plakbriefje uit een apart bestand wilt laten inlezen, moet te betreffende file zich binnen het top-level domein bevinden waar ook de pagina die het plakbriefje toont zich bevindt.
Onder de motorkap wordt jQuery ingezet om bepaalde functies uit te voeren. Zo wordt bijvoorbeeld AJAX ingezet om externe files in je document te laden. Als eindgebruiker heb je niet met jQuery te maken, dat wordt allemaal intern geregeld.
Het is noodzakelijk dat elk plakbriefje een uniek id heeft. Het kan handig zijn om class- en id-naam gelijk te houden, om verwarring te voorkomen.
In het object stickynote moet het item content moet aanwezig zijn, de rest is optioneel.
Andere zaken die je in het object kunt instellen zijn:
• De plaats waar het plakbriefje moet verschijnen (gecentreerd of in pixels),
• Het plakbriefje moet uit zichzelf verdwijnen na een zekere tijd, of juist moet blijven staan,
• Het plakbriefje wordt altijd getoond, of 1× per browsersessie of soms-wel-soms-niet,
• Het plakbriefje staat op een vaste plek in het window of scrollt mee met het document, en
• Het plakbriefje wordt getoond met een fade-in effect (een fade-out effect bij verbergen van een briefje is niet beschikbaar).
Tenslotte is er de mogelijkheid om een plakbriefje te verbergen of te tonen met behulp van de methode showhidenote, die je de parameters 'show' en 'hide' kunt meegeven.

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>
.stickynote1{
position:absolute;
visibility:hidden;
width: 300px;
border: 2px solid black;
background-color: #ff5;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
}
.stickynote2{
position:absolute;
visibility:hidden;
width: 200px;
border: 2px solid black;
background-color: #ff9;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="stickynote.js"></script>

<script>
var mysticky2 = new stickynote({
content:{divid:'stickynote1', source:'inline'},
pos:['right', 'bottom'],
showfrequency:'always'
})
var mysticky2 = new stickynote({
content:{divid:'stickynote2', source:'stickydata.txt'},
pos:['center', '100px'],
showfrequency:'always',
hidebox:10
})
</script>

(Zet dit in de <BODY>, bij voorkeur aan het begin.

<div id="stickynote1" class="stickynote1">
<img src="html.gif" style="float:left; margin-right:10px">Je kunt
alle geldige HTML die in de <i><body></i> mag voorkomen,
gebruiken in een plakbriefje (maar pas op met scripts …)!<br>
<div align="right">
<a href="" onClick="mysticky1.showhidenote('hide');return false"><i>Sluiten >></i></a>
</div>
</div>

De inhoud van de file stickydata.txt is:

<div id="stickynote2" class="stickynote2" style="text-align:center">
Hier lees je hoe je van die gele plakbriefjes op je HTML-document kunt laten verschijnen.<br>
 <br>
Dit bericht staat nu in de weg, maar het verdwijnt vanzelf.
</div>

Downloaden:

Druk op de knop: File: voorb002.zip, 4070 bytes.

Opmerking:

Als je een file stickydata.txt wilt gebruiken als content van een plakbriefje, moet je bij het ontwikkelwerk je resultaat bekijken met behulp van een (lokale) webserver, zie bijvoorbeeld het item Eenvoudige lokale webserver met node.js. De browser opstarten door het .html-bestand aan te klikken gaat niet werken. Dat is een beveiligingskwestie: de (lokaal werkende) browser ziet het dan niet als een geldige HTTP-aanroep.