Dol geworden popup-window

Sommige websites proberen popup-windows te gebruiken om reclame te maken voor zichzelf of voor andere websites.
Daarbij worden zelfs popup's gebruikt die heen en weer over het scherm bewegen. Soms gebeurt dat op een manier waarvan je je afvraagt of de eigenaar van die site zijn bezoekers wel serieus neemt.

De JavaScript code die op deze bladzijde wordt besproken is speciaal bedoeld voor webmasters die popups gebruiken om hun bezoekers weg te jagen. Deze code is dan ook ondergebracht in de rubriek "Neem je bezoekers in de maling".
N.B.: De browser moet dus wel toestaan dat de site popups maakt. Als dat niet zo is, verschijnt de 'popup' in een nieuw tabblad en gaat het effect verloren. De toepasbaarheid van dit effect is dus beperkt.

Op deze plaats wordt een methode behandeld om een bewegende popup te maken, en wel op zo'n manier dat je bezoekers er gegarandeerd ibbelig van worden.

Als je op de knop hieronder drukt, zie je een voorbeeld van de werking van het script.
Druk nogmaals op de knop om het effect te stoppen
 

Dit is een bewerking van een script dat ik vond op de site www.javascriptsource.com, (voorheen javascript.internet.com), waar het te vinden was onder de naam "Crazy Window". Op die site is dit script niet meer beschikbaar.

Die uitvoering is nogal kort door de bocht geprogrammeerd, zonder enige beheersmogelijkheid. De hier getoonde versie is op dat punt aanzienlijk verbeterd.

De code van het script en de popup staan onderaan deze bladzijde. Je kunt hem ook downloaden om zelf te gebruiken.

• Er worden drie items besproken:
  1. Inbouwen in je site.
  2. Beïnvloeden van de bewegingssnelheid van de popup.
  3. Werking van het script.
• Een deel van de code staat in de pagina die de popup opent. Het betreft hier de code die de popup opent en sluit. Speciaal voor dit voorbeeld is er een drukknop gemaakt die werkt als aan-uit schakelaar.
  Een dergelijke voorziening is beslist nodig als je deze techniek toepast, al was het alleen maar om een eventuele poup-blocker te omzeilen.
  Zie ook: Popups die door de popup-blocker worden toegestaan.
  In het slechtste geval ben je aangewezen op de "Sluiten"-optie van de taakbalk, of zelfs CTRL+ALT+DEL om de boel te stoppen ...
• De code waarmee de beweging van de popup wordt geregeld staat in de code van popup zelf.
  Je moet deze code veranderen om hem goed te kunnen gebruiken. Zie ook de code onderaan deze bladzijde.
   
• Als je een popup wilt gebruiken moet je eerst weten hoe groot deze moet worden. Deze informatie heb je nodig bij het openen van de popup, maar ook in de code die de popup laat bewegen.
  Op deze bladzijde is de breedte van de popup 450 pixels en de hoogte is 200 pixels. Merk op dat de breedte van de window-randen daar nog bij komt.
• Bij het openen van de popup zijn deze gegevens vastgelegd in de variablelen width en height.
  In de popup zelf staan deze gegevens in de variabelen popupWidth en popupHeight.
• Zorg er voor bij het inbouwen dat width en popupWidth resp. height en popupHeight exact aan elkaar gelijk zijn, anders wordt het resultaat onvoorspelbaar.
• Het is ook belangrijk om te weten wáár de popup voor het eerst op het scherm moet verschijnen. Dit regel je bij het openen van de popup met de variabelen top en left.
  In de popup zelf staan deze gegevens in de variabelen popupTop en popupLeft.
• Zorg er voor bij het inbouwen dat top en popupTop resp. left en popupLeft exact aan elkaar gelijk zijn, anders wordt het resultaat onvoorspelbaar.
   
• Meer informatie over het openen en sluiten van windows is te vinden in het item "Window openen/sluiten vanuit een ander window" (punt 2 en 2a), in de rubriek "Navigatie", elders op deze site.
  Geadviseerd wordt om de overige instellingen (toolbar, scrollbars, etc.) zoals die hier worden toegepast niet te wijzigen.
   
• De bewegingssnelheid van de popup kan worden veranderd door het veranderen van de variable speed. Deze staat nu ingesteld op 20. Als je deze op een lagere waarde zet, gaat de popup sneller bewegen, en andersom. Met speed stel je namelijk de tijd in die het script wacht alvorens een nieuwe plaats voor de popup te bepalen.
   
• De werking van het script dat de popup laat bewegen is -zonder in details te treden- als volgt:
  • Zodra de pagina in het popup-window is geladen wordt de function InitJump() gestart. Deze doet twee dingen:
    • Bepaalt de plaats waar de (linker bovenhoek van de) popup zich op het scherm mag bevinden. Hierbij wordt uitgegaan van de afmetingen van de popup (zonder de randen); de plaats waar de popup als eerste verschijnt wordt hier ook gebruikt.
      Tevens wordt de grootte de beweging (variabele a) geïnitialiseerd op 0.
    • Start de beweging door regelmatig de functie Jump() aan te roepen. Dit gebeurt om de speed miliseconden met behulp van setInterval.
     
  • De function Jump() doet het eigenlijke werk. Hierin zijn de volgende stappen te onderscheiden:
    • Elke keer dat deze function wordt aangeroepen wordt a verhoogd. De beweging gaat dus in steeds grotere stappen. Als a groter wordt dan de kleinst beschikbare schermafmeting (meestal zal dat maxY zijn) wordt a teruggezet op 1.
    • Er wordt met Math.random een willekeurige horizontale en verticale verplaatsing bepaald. Hierbij speelt a aan rol.
      De nieuwe plaats van de popup wordt bewaard in locX en locY.
    • Er wordt gekeken of de popup niet te ver van het scherm verdwijnt. Mocht dat het geval zijn dan wordt dat gecorrigeerd.
    • Tenslotte wordt de popup op de nieuwe positie geplaatst.
• Deze werkwijze heeft tot gevolg dat de popup met sommige browsers toch tijdelijk buiten het scherm valt (en dus onzichtbaar wordt). Dat geldt althans voor Internet Explorer. Door de rekenwijze kan de popup in andere browsers enige tijd stil blijven staan.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY> van de pagina die de popup opent.
• De code staat in de <HEAD> van de popup.
• De <BODY>-tag van de popup bevat een extra attribuut.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD> van de pagina die de popup opent).

<script>
Geopend = false;
function ToonVoorbeeld() {
  if (Geopend) {
    MijnVenster.close();
    Geopend = false;
  } else {
    MijnVenster = window.open("html138a.htm","",
    "top=50,left=50,toolbar=no,location=no,directories=no,status=no,"+
    "menubar=no,scrollbars=no,resizable=no,width=450,height=200")
    Geopend = true;
  }
}
</script>

<div align="center">
  <button name="Voorbeeld" value="Voorbeeld" type="button"
  onClick="ToonVoorbeeld()">Voorbeeld AAN / UIT</button>
</div>

<script>
// Original Idea: Eric B. Dennis
// Enhanced by Ben's Hobbyhoekje, Ben Boukes (c) 2004
 
speed = 20; // Movement speed of window. Lower number== higher speed
// Below data MUST be exact the same as used in de open function of the popup.
popupWidth = 450; // Dimensions of popup window
popupHeight = 200;
popupTop = 50; // Screen Location of popup window
popupLeft = 50;
 
// ------ No edit below this line ------
function InitJump() {
  if (document.layers || document.getElementById) {
    maxX = screen.availWidth - popupWidth/2;
    maxY = screen.availHeight - popupHeight/2;
    locX = popupLeft;
    locY = popupTop;
    a = 0;
    setInterval("Jump()", speed);
  }
}
 
function Jump() {
  a += 1; // Deteremine step size and move window
  if (a > maxX || a > maxY){ // Prevent a from becoming too big
    a= 1;
    locX = popupLeft;
    locY = popupTop;
  }
  dx = Math.floor(Math.random() * a * 2 - a);
  dy = Math.floor(Math.random() * a * 2 - a);
  locX += dx; locY += dy; // Control Location of Window
  if (locX > maxX) locX = maxX - popupLeft - popupWidth;
  if (locX < -popupWidth/2) locX = popupLeft;
  if (locY > maxY) locX = maxY - popupTop - popupHeight;
  if (locY < -popupHeight/2) locY = popupTop;
  self.moveTo(locX,locY);
}
</script>

onLoad="InitJump()"

Downloaden:
 
Druk op de knop:  File: voorb138.zip, 1129 bytes.

Opmerking:
 
Ook hier geldt: wees voorzichtig met de toepassing. Te veel beweging maakt een web-pagina onrustig. Dat geldt zeker met deze methode! Dat zal je bezoekers er niet van weerhouden om snel te vertrekken, maar daar vroeg je zelf al om door deze techniek toe te passen...