Visa vad som är nytt på sidan

Visst vore det bra om besökarna omedelbart såg vad som är nytt på hemsidan? Vi kan se till att de gör det, genom att använda en nyhetsskylt där det nya ligger.

Sedan skall skylten bort igen efter en tid. Det är ju inte meningen att den skall ligga kvar hur länge som helst och påstå att något är nytt. Då förlorar reklamen sitt värde.

Men om man ofta har nyheter på hemsidan, är det lätt hänt att man missar att ta bort "nyhetsflaggan". Då är det praktiskt att automatisera det hela med ett skript.

Du kan knycka bilden ovan. Högerklicka på bilden och välj "Spara bild som...". Koden nedan är anpassad för den här bilden. Om du använder en annan bild måste du ändra koden så att du får rätt värden för bland annat bildstorleken.

Vi börjar med den kodsnutt som skall läggas in på varje plats där vi vill visa nyhetsflaggan:

<SCRIPT LANGUAGE="JavaScript">
<!--
nyGrej("03/24/2003");
// -->
</SCRIPT>

nyGrej("03/24/2003")
Vi placerar den lilla kodsnutten precis där bilden skall visas. Det här anger till vilken datum bilden skall visas. Ändra i skriptet och skriv in datum i formen mm/dd/åååå.

Vi kan lägga in den här koden på flera platser, överallt där vi har nyheter som vi vill "flagga för". På varje plats anger vi ett "slutdatum".

Den här koden kommer att anropa funktionen nyGrej() i det JavaScript som läggs i HEAD-elementet. Dit tar den med sig värdet som vi anger för slutdatum, i exemplet ovan den 24 mars 2003.

Skriptet i HEAD-elementet skall se ut så här:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet
function nyGrej(slutDatum)
{
slut = new Date(slutDatum);
nu = new Date();
if (nu.getTime() < slut.getTime()) document.write("<IMG SRC='ny.gif' align='left' width=16 height=13 border=0 hspace=2 alt='Nytt'>" );
}
// Sluta gömma -->
</SCRIPT>

function nyGrej(slutDatum)
Vi deklarerar funktionen nyGrej(slutDatum), som anropas från BODY och får sina parametrar därifrån.

slut = new Date(slutDatum);
Här skapar vi ett date-objekt som får sitt innehåll från skriptet i BODY (03/24/2003).

nu = new Date();
Här skapar vi ytterligare ett date-objekt, men den här gången får det sitt värde från dagens datum.

if (nu.getTime() < slut.getTime()) document.write("<IMG SRC='ny.gif' align='left' width=16 height=13 border=0 hspace=2 alt='Nytt'>" );
Hela den här koden skall stå på en enda rad. Vi tar den bit för bit:

if (nu.getTime() < slut.getTime())
Först jämförs om antalet millisekunder som har förflutit från 1 januari 1970 till "nu" är mindre än motsvarande för "slut". Om så är fallet, fortsätts skriptkörningen – annars avbryts den.

document.write
Detta betyder: Skriv på den här HTML-sidan.

("<IMG SRC='ny.gif' align='left' width=16 height=13 border=0 hspace=2 alt='Nytt'>" )
Det som står mellan citationstecknen är det som skall skrivas till sidan. IMG-taggen som visar bilden skapas alltså från funktionen i skriptet:

<IMG SRC='ny.gif' align=left width=16 height=13 border=0 hspace=2 alt='Nytt'>

Det här gör, att om "nyheten" är för gammal, kommer bildtaggen inte att finnas. Därmed visas inte heller bilden.

HTML-koden betyder: Visa bilden ny.gif till vänster på sidan; visa den 16 pixlar bred och 13 pixlar hög, utan kantlinje; ge bilden 2 pixlars marginal i sidled; om bildvisningen är avstängd skall i stället texten "Nytt" visas.

Det lilla skriptet finns till vänster i det här textstycket, innanför P-taggen men före själva texten, och med 24 december 2010 som slutdatum.

Skriptet finns längst till vänster även i det här stycket, men jag har satt slutdatum till 24 december 2000. Det betyder att nu inte är mindre än slut och därför visas ingen bild.

© SupportData.Net