Webdesign 101: Dynamisk HTML eksempelside

Webdesign 101 » JavaScript eksempler » Eksempel 2

En annonce, der glider ind og ud

Dette er én af utallige metoder til at gøre en læser opmærksom på et eller andet specielt ved den side, hun har indlæst.

Det er nok mere almindeligt at åbne et nyt browservindue, men jeg synes bedre om denne metode. Brugen af nye browservinduer til alle mulige ting har taget overhånd, også i et omfang, så der er udviklet specielle browser-add-ons, der efter sigende skulle forhindre, at det kan ske. Hvorom alting er, her er opskriften på, hvordan du laver et anderledes popup vindue.

HTML-koden

Først laver du annoncen som en box:

<div id="box" style="position:absolute; left:250px; top:-170px;">
[ Annoncens indhold ]
>/div>

Bemærk her, at positionsangivelserne er sat inline. Det er nødvendigt, fordi Internet Explorer ikke kan aflæse boksens startposition, hvis den står i en style-markør. Boksens øvrige egenskaber – herunder boksens højde på 160 pixel – har jeg sat i stylesheet'et i head-delen af websiden.

Bemærk også, at jeg har "skjult" boksen ved at give den en negaviv topmargin på 170 pixel (boksens højde + 2 gange boksens padding).

Scriptet

Tricket består nu i at flytte boksen nedad, lade den stå nogle sekunder, og derefter flytte den opad igen. Til det formål tager jeg udgangspunkt i den simple glide-funktion, jeg har forklaret om på websiden Flyt med og animation:

function slideBox(){
  var count = findX('box')
  if (count < 250) {
    flytMed('box', 5, -5);
    setTimeout('slideBox()',30)
  }
}

I denne funktion ser du to funktionskald, dels til findX(objekt) og dels til flytMed(objekt,dx,dy), som skal være defineret på forhånd. Det har jeg gjort i mit DHTML-modulbibliotek, som jeg så har indlæst i head-delen af den webside, hvor jeg ønsker annoncen.

Forsynet med de parametre, som er relevante for denne side, kommer glide-funktionen til at se således ud:

function visAnnoncen(){
  var count = findY('box')
  if (count < 0) {
    flytMed('box', 0, 5);
    setTimeout('visAnnoncen()',30)
  }
}
window.onload=visAnnoncen

Den sidste linie her er en alternativ måde at udløse en onload-funktion på.

Nu har jeg sørget for, at annoncen glider ned og bliver synlig. Men det er jo ikke nok. Jeg skal også fjerne den igen. Det gør jeg ved hjælp af en ny funktion, fjernAnnoncen(), der er en komplementar til den allerede definerede funktion. I sin helhed kommer scriptet herefter til at se således ud:

function visAnnoncen(){
  var count = findY('box')
  if (count==0) {
    setTimeout('fjernAnnoncen()',5000)
  }
  else if (count < 0) {
    flytMed('box', 0, 5);
    setTimeout('visAnnoncen()',30)
    }
  }
  
function fjernAnnoncen() {
  var count = findY('box')
  if (count > -170) {
    flytMed('box', 0, -5);
    setTimeout('fjernAnnoncen()',30)
  }
}
window.onload=visAnnoncen

Den variable count er identisk med boxens y-position. Hvis den er 0, er boksen synlig. Så det tester jeg allerførst for, fordi hvis boksen er synlig, skal den fjernes.

Er boksen ikke synlig, er count mindre end 0, og så flyttes boksen nedad med 5 pixel hvert 30. millisekund, indtil count er nul.

Men når count er nul, flyttes ikke længere nedad. Derimod udløses funktionen fjernAnnoncen() efter 5 sekunders forløb. Denne funktion flytter boksen opad indtil count er -170 pixel.

Oprettet 8. maj 2003.

Dette er én af utallige metoder til at gøre en læser opmærksom på et eller andet specielt ved den side, hun har indlæst.