Onderdelen van de pagina tonen gedurende een bepaalde periode
Er zijn toepassingen in een website denkbaar waarbij dingen alleen gedurende een bepaalde periode
zichtbaar zijn.
Ter gelegenheid van het vijfjarig bestaan van deze site (op 16 augustus 2006) is het plaatje gemaakt dat links
van deze tekst staat. Het is zichtbaar (geweest) van 16 augustus tot en met 16 september 2006.
Het is natuurlijk mogelijk om op 16 augustus het plaatje in de code op te nemen en op 17 september weer te
verwijderen, maar dat is lastig. Het is veel handiger om een en ander van te voren in JavaScript te programmeren
en het aan de browser van je bezoeker over laten om het al of niet te laten verschijnen.
Hier staat beschreven hoe je zoiets aanpakt. In feite is het een combinatie van de items Onderdelen van de pagina tonen tot een bepaalde datum en Onderdelen van de pagina tonen vanaf een bepaalde datum".
De code kun je hier ook downloaden, inclusief het plaatje.
- Het script bestaat uit een variabele imagetag en een function validper().
- De function validper() heeft twee parameters:
- validdate. Dit is de eerste dag waarop de code in imagetag in de pagina wordt gezet.
- expiredate. Dit is de eerste dag waarop de code in imagetag niet meer in de pagina wordt gezet.
Als je dus opgeeft: validdate = 16 augustus 2006, dan betekent dat dat de code in imagetag op 16 augustus 2006 voor het eerst zichtbaar wordt op het scherm.
Als expiredate = 17 september 2006 betekent dat dat de code in imagetag tot en met 16 september 2006 zichtbaar is op het scherm. - In imagetag zet je de HTML-code die moet worden gebruikt als de datum is bereikt, bijvoorbeeld een <img>-tag om een plaatje te tonen.
- Je kunt alle geldige HTML-code in imagetag zetten. Het is dus niet beperkt tot plaatjes.
- Geef bij aanroep van validper() de begin- en einddatum op in Amerikaanse notatie, dat wil zeggen:
Maand dag, jaar. Gebruik voor de maanden ook de Amerikaanse spelling (let op de hoofdletters):
January February March April May June July August September October November December - In het voorbeeld hieronder wordt het plaatje vijfjaar.gif getoond vanaf 16 augustus 2006, tot en met 16 september 2006.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script>
// Zet hier de html-code die je wilt laten zien met ingang van een bepaalde dag
var imagetag='<img src="vijfjaar.gif" width="130" height="130" border="0" alt="Eerste jubileum op 16 augustus 2006">';
var today=new Date();
function validper(validdate,expiredate) {
var validfrom = new Date(validdate);
if (today.getTime() >= validfrom.getTime()) {
var expire = new Date(expiredate)
if (today.getTime() <= expire.getTime()) document.write(imagetag);
}
}
</script>
(Zet dit in de <BODY> op de plaats waar het plaatje moet komen).
<script>
validper('August 16, 2006','September 17, 2006')
</script>
Downloaden:
Druk op de knop:
File: voorb178.zip, 4749 bytes.
Opmerking:
Je kunt iets dergelijks ook gebruiken om delen van je pagina automatisch te laten verdwijnen met ingang van
een bepaalde datum, of juist te laten verschijnen. Zie daarvoor de items "Onderdelen
van de pagina tonen tot een bepaalde datum" en "Onderdelen
van de pagina tonen vanaf een bepaalde datum".
