Disable Vertical Scroll-bar when Lightbox is open
nbchip - September 22, 2009 - 00:03
| Project: | Lightbox2 |
| Version: | 5.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
Is it possible to disable user beeing able to scroll when lightbox is open?
on long pages sometimes user can stray away from where content is loaded.
thx.
#1
Anyone?
#2
i found out that this works for FF 3, chrome 3, IE 8... didnt test others
//LB .start$("body").css("overflow", "hidden");
//LB .end
$("body").css("overflow", "auto");
but maybe it would be better to position LB as fixed, like thickbox does.
#3
Nice solution.
But how did you determine when lightbox2 was opened and closed in order to change the overflow on Body?
I also looked at making lightbox2
position:fixedbut I couldn't get it to happen. Any heads-up on that one?#4
Now I think I understand, you hacked the lightbox2.js file and added the jQuery
$(body).code.I also tried this, adding the code to:
// start()// Display overlay and lightbox. If image is part of a set, add siblings to
// imageArray.
start: function(imageLink, slideshow, lightframe, lightvideo, lightmodal) {
$("body").css("overflow", "hidden"); // ADDED
..
and to:
end: function(caller) {..
$("body").css("overflow", "auto"); // ADDED
},
This is a nice hack but it doesn't work with IE6/7 or Opera. There are not evil side-effects, the changes to the body element just don't seem to take effect.
I think something like this (that actually works) is a much needed feature of LIghtbox2. My users number one gripe is losing the lightbox on the screen...
Does anyone know a method that works well with IE6/7?
#5
I have been working on this hack to get it to work in all browsers using the 6.x branch.
Basically, it serves my purpose but is clearly not a perfect solution. The reason is because it allows the lightbox to be
position:fixedfor all browsers tested (Chrome, FF, Opera, Safari, IE7+) with the exception of IE6 (which is assigns absolute position, as per the default of Lightbox). Another issue is that it usesIE expressions.. which we all know are to be avoided as much as possible.I see this as acceptable for the moment because non-IE6 users will get the benefits of this feature, while IE6 users will just get the default (lightbox can be scrolled up and down - potentially losing it on the screen). Like I said, not ideal but it's fine by me.
The reason it has issues with IE6 is because of the well-known
position:fixedbug, which in this case I couldn't manage to work-around - it was causing all sorts of issues because of the various positioning of different DIV's in Lightbox.Here's my solution, suggestions welcome on how to improve it:
Firstly, I added this to my
style.css#lightbox {position:fixed;
}
I then had to hack the code in
lightbox.jsto remove the top from being set in JavaScript, instead adding the value to a variable in the Lightbox DOM object.(about line 400)
$('#lightbox').css({
'zIndex': '10500',
// 'top': lightboxTop + 'px', /* This line has been removed, valued added to a variable in Lightbox instead */
'left': lightboxLeft + 'px'
}).show();
Lightbox.lightboxTop = lightboxTop; /* Instead, I create a new Lightbox DOM variable to store the value (used as a expression for IE6) */
..
..
I then added this to my
ie.css(conditional CSS for IE 6 only)/* Position Lightbox as per the module default */#lightbox {
position: absolute;
top: expression( ie6 = Lightbox.lightboxTop + 'px'); /* Use the value from the Lightbox DOM variable we created in Lightbox.js */
}
If anyone has a better solution, please let me know.
#6
Hi
could you explain in which document you've changed this (or added this)?
I'm working with Drupal 6.
I've added a screenshot of the scrollbars in the lightbox.
Els
#7
@elsvandeveire: the issue we were discussing is different from the issue you've got.
For your problem you will probably need to change the size of the lightbox2 wrapper around your content.
Use the Firebug plugin for FireFox to find the DIV id and then change the height and width in the CSS for your theme.
#8
Tx!