Hebbes!
Het javascript
lightbox.js is
niet het originele javascript 
Het lijkt er als 1,99 druppels water op, maar het is het niet:
- de aanhef en het versienummer zijn identiek (de actuele laatste versie Lightbox v2.05, Last Modification: 3/18/11),
- de hele rest ook, met één uitzondering:
- in de script-regel voor de top-positie van de lightbox is iets veranderd !!!
- die verandering is geen goede code.
In het origineel staat op regel 233:
Code:
...
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
...
Daar is van gemaakt:
Code:
...
this.lightbox.setStyle({ top: lightboxTop + '[B]50[/B]px', left: lightboxLeft + 'px' }).show();
...
En dat is fout. *)
Deze error veroorzaakt bij mij in FF het zakken van de lightbox in de zwarte put.
- Zodra ik regel 233 vervang door de oorspronkelijke, gaat het ook in Firefox goed.
==========
Toelichting:
De
lightboxTop in de code is een variabele en geeft een getal weer.
Omdat de css van een top-eigenschap een maateenheid px nodig heeft, wordt de variabele gekoppeld aan de tekst 'px'. De + in de code betekent niet
optellen, maar
er achteraan plakken. In de code:
[JS]...
lightboxTop + 'px'[/JS]
Als bv. lightboxTop een waarde heeft van 83, wordt de uitkomst: "83px" (wat geen getal meer is, maar wel bruikbaar om de style op te geven).
Als je gebruikt:
[JS]...
lightboxTop + '50px'[/JS]
kunnen de twee
niet opgeteld worden, want "50px" is geen getal maar een tekst-string. Dan wordt het getal ook als een tekst opgevat, en worden de twee
als tekst achter elkaar gezet, zodat de uitkomst is: "8350px".
Dat doet Firefox dan ook!
==========
Blijft over de vraag:
waarom doen de andere browsers het dan wel?
- Antwoord: Dat blijkt puur toeval!
Toelichting:
Het script berekent de top-afstand namelijk op grond van de hoogte van het browserscherm van de bezoeker.
Die hoogte wordt door 10 gedeeld, en dat is dan de top-afstand.
Als de hoogte door 10 deelbaar is, komt er een heel getal uit.
- Dat was bij mij (met de toolbars en de statusbar die ik aan heb staan) toevallig het geval: de schermhoogte was 830px. Dan werd de uitkomst 830/10=83 plus de "50px" > dus "8350px".
- Maar in Internet Explorer en andere browsers is dat bij mij toevallig niet het geval. Bv. in Internet Explorer is bij mij de bruikbare schermhoogte: 818px.
- Een tiende daarvan geeft voor de topafstand een waarde van het getal 81.8.
- Als dit getal samengevoegd wordt met "50px", wordt het samen de tekst-string "81.850px".
- Maar css leest wat voor de "px" staat weer als getal (in de Amerikaanse notitie met een punt ipv onze komma): 81,85px.
- En omdat beeldschermen niet kleiner kunnen gaan dan 1 pixel, wordt dat afgerond tot 81px of 82px.
- Op die afstand van boven komt dan de lightbox te staan, en er lijkt niets aan de hand!
==========
Een testpagina:
Hierin wordt aangegeven wat de schermhoogte en de verdere berekening als uitkomst geeft in de browser waarmee de pagina wordt bekeken.
Het gaat goed als 1/10 van de schermhoogte niet op een heel getal uitkomt, en anders gaat het fout.
Hierbij maakt het niet uit welke browser gebruikt wordt! **)
==========
Het bewijs:
Hierin wordt de 1/10 van de gemeten schermhoogte eerst afgerond op een heel getal, en dan gebruikt voor de verdere berekening.
Nu gaat het altijd in elke browser fout, net als bij mij in Firefox.
==========
Conclusie:
Tevoren valt niet te voorspellen of een bezoeker zijn/haar browserhoogte op een veelvoud van 10 heeft staan, waardoor de lightbox verkeerd wordt geplaatst.
Dus de 50 weer uit het script halen, dan is alles weer ok.
Met vriendelijke groet,
CSShunter
__________
*) Ik stond al half en half klaar om de maker van de lightbox een mailtje te sturen dat z'n code niet waterdicht was, maar toen ik voor de veiligheid zijn script downloadde om te kijken of er soms intussen een update was gemaakt, kwam ik er achter dat er aan z'n script was geknutseld.
**) Daarom ging het bij mij in Firefox opeens ook goed toen ik het Firebug-venster had geopend: daarmee werd de voor de pagina beschikbare schermhoogte kleiner, en geen veelvoud van 10 meer > probleem zogenaamd afwezig!
Die verklaring had ik vóór het doorneuzen van het javascript niet bedacht.
