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 wordt getoond maar is niet apart te downloaden. Vanwege copyright bepalingen moet de code worden gedownload van de site van de makers van het script.
De bespreking beperkt zich tot een ~~beknopte opsomming~~ van de mogelijkheden van het script en het toepassen in je eigen site.

Het script is gemaakt door Dynamic Drive. Volg deze link om direct naar de code te gaan.
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 bijhet 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 de beschrijving van de plakbriefjes staat hoe je het object stickynote kunt opbouwen. 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).
Tensotte 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>