Lightwindow’s overlay height is too short
30 Sep2008
When working on a project I ran into this problem where lightwindow didn’t function properly. In some cases the black/greyish overlay didn’t fill up the entire page, like so:
Lightwindow overlay height goes wrong
The reason for this is that the height doesn’t get calculated properly when you use ajax-requests on your page. So when you fetch data that makes your page a bit higher then it originally is, Lightwindow will still use the old, original height of the page.
Ok, so now we know why things get ugly, but how do we solve it?
By adding the piece of code below the problem was solved.
/* Fix the height of the overlay */ this._getPageDimensions(); document.getElementById("lightwindow_overlay").setStyle({ height: this.pageDimensions.height + 'px'});
Add this directly after the line:
this._setupDimensions();
Thanks to a (now unreachable) post on the stickmanlabs forum.
UPDATE
In addition to the explanation above I found that, on top of a little fix in lightwindow, the reason for all this was happening was a slightly different version of prototype. I had been using a newer one (1.6.0.1) compared to the one provided with the lightwindow script (1.5.1.1)..
- In: Javascript
- Tags: Lightwindow, overlay
20 Responses to Lightwindow’s overlay height is too short
John
March 17th, 2009 at 22:16
Where do you place this snippet of code in the js file? Thanks!
Coen Coppens
March 18th, 2009 at 13:37
Hi John,
I placed it right after the line “this._setupDimensions();”. In my file its line number 347, right after the comment “//Setup everything”:
John
March 18th, 2009 at 23:52
Thank You! It worked perfectly! I also had to add 40 pixels to the page height because of a negative margin in the footer area. Cheers!
Kneep
April 8th, 2009 at 11:32
Hey Coen, ik loop tegen hetzelfde probleem op…gebruik lightwindow 2.0 en heb jouw bovenstaande oplossing geprobeert. Gebruik daarnaast de laatste versie van prototype (1.6.0.3), maar het is nog steeds niet opgelost in IE7 & IE8…
Heb je nog een tip waar ik naar zou kunnen kijken?
Phunkk
April 8th, 2009 at 20:05
Kneep, heb je het probleem ook als je je prototype downgrade naar de versie die met lightwindow wordt meegeleverd? De nieuwere versie zorgt waarschijnlijk voor de problemen. Als downgraden geen problemen in de rest van je applicatie geeft zou ik dat eerst proberen.
Dom
May 27th, 2009 at 18:01
i have some js on my page that expands certain sections, although the lightwindow doesn’t detect this and therefore the lightwindow_overlay does not display the full screen. check it;
http://dombeckford.co.uk/motion.html
open all of the sections and choose the last one.
any help?
Coen Coppens
May 27th, 2009 at 20:13
Hi Dom,
Did you add the fix and use the version of prototype that comes with the package? If so, it seems like it has something to do with absolute positioning, but that’s just a semi-wild guess..
m
July 31st, 2009 at 23:57
that fix is still buggy in ie
Coen Coppens
August 4th, 2009 at 22:31
Problems in IE8 i guess?
This fix really is kind of a last resort, there are a lot of other solutions that are a lot prettier
Matt
August 5th, 2009 at 18:59
Can you point us to some of the prettier solutions?
I tried this and it seemed to work for a second, but then it stopped. SO…I trashed my lightwindow.js file and went back to the original, made only this change and am still not getting the desired results.
Coen Coppens
August 6th, 2009 at 00:45
Basically some of my prettier solutions consist of using different libraries
Ever since I switched from prototype and lightwindow to jquery and thickbox all these problems are history.
This does require you to learn the jquery-framework, but I can guarantee you it’s worth the effort. If you’re already familiar with javascript frameworks the switch won’t be that big. It might mean that you’ll have to rebuild an entire site/app though, which I can tell sucks
Matt
August 6th, 2009 at 06:41
I want to use this to display a flash video player, and there doesn’t appear to be much documentation around on how to configure ThickBox to display flash…although i see the author says it can.
I get the height problem after i launch the lightwindow and then maximize or resize the browser to a larger size than it was when the page loaded. It is very strange because it does not do this on the swf example on the stickmanlabs site. There the overlay resizes with the browser window properly. I do not think I should even be having this problem but I can’t figure it out for the life of me. Spent 2 days in a row scouring for a fix.
Matt
August 6th, 2009 at 06:43
i meant this to link stickmanlabs demos
Phunkk
August 6th, 2009 at 08:09
Matt: Do you have a link you can send me so I can have a look? There might be some elements positioned in a way that cause lightwindow to panic (absolute for example). Any of those around?
Matt
August 6th, 2009 at 14:37
Phunkk: Hi! Thanks for the reply! I have set up a test page here that contains only a single link and demonstrates the problem I am having.
I just used the default.css from stickmanlabs for the test.
If you can shed some light here I will be EXTREMELY grateful. Thanks so much!
Matt
August 7th, 2009 at 17:05
Since this problem didnt occur on the stickmanlabs site i just grabbed his page and reverse ingineered it until ifigured out that he fixed it by just including a div with the overlay img as the background as the last thing on the page with a very large height. Works now. Thanks.
Coen Coppens
August 9th, 2009 at 16:47
Glad the problem is solved! Can you share the solution?
Matt
August 10th, 2009 at 18:05
Add this before the closing “” tag
[code]
[/code]
Matt
August 10th, 2009 at 18:06
Uhhh….how do you include code in these comments?
Andy Potts
April 22nd, 2010 at 10:33
I too had this problem. It turned out to be because I had placed the whole site into a div element with position:absolute. Just by making it position:relative and removing the margins from the top and bottom of the page, lightbox worked fine.