Arrow Key Navigation causes underlying screen to shift

This is because you have the "Always use the cursor keys to navigate between pages" option enabled. This is a Firefox option and can be configured in the Firefox options dialog at "Advanced -> General -> Accessibility".

Cheers,
Stella

Hi,

I have the same issue in Firefox 3.0.5 (on OS X 10.5.6)

I'm using the latest dev version. I've checked the settings as suggested by Stella, but the accessibility options are all disabled so it appears unrelated.

When the images are set to cycle, I can move the entire page off-screen. It makes the arrowkeys unusable as it is.

When the Lightbox2 popup is closed, the page position is restored and the arrowkeys no longer have effect, so it appears to be a problem in Lightbox + Firefox.

- The problem only occurs on image sets (when moving next or previous)
- It is also reproducable on Stella's website: http://www.stellapower.net/lightbox2
- Strangely enough, on the Lightbox2 website it works without problems: http://www.huddletogether.com/projects/lightbox2/

So far I can confirm this issue on Mac OS X, Windows Vista, Windows 2000 (Firefox 3.0.4 or 3.0.5)

Stella, on your website if you go to the lightbox2 page down to "Grouped images", you can see the horizontal scrollbar in the window. Every "prev" or "next" action appears to make the window wider, judging from the scrollbar.

Using Firebug, I noticed the style code in the overlay:

The width property keeps getting larger every time I do a prev or next action, either by using the arrow keys or by just clicking the next / prev buttons.

The increment every time is 16 pixels. So it goes from 1280 to 1296, 1312, etc. ad infinitum. I suspect this is the cause of the issue.

Perhaps it is some Firefox specific Javascript that is crooked?

The scrollbar issue is a known issue and was previously raised in #282590: Lightbox overlay too large? and #276891: "X" mark (close) is wrong formatted in Firefox 2.0.0.14 (see comments #11, #13). I did create a patch, but had to roll it back because of other problems it introduced.

It is caused by what I believe to be a bad interpretation by Mozilla of window.innerHeight and window.innerWidth which includes the scrollbar's width in it's calculation.

When you enable "Always use the cursor keys to navigate between pages", the arrow key problem goes away. Seems counter-intuitive...

Anyway, the problem seems to be in the function getPageSize() (js/lightbox.js)

The function is called by showData(), where the style property "width" is updated.

I found the following fixes the problem on Firefox, but it's rather crude and requires review by the author.

Change the following in the function showData() (js/lightbox.js):

$('#overlay').css({'height': pageHeight + 'px', 'width': arrayPageSize[0] + 'px'});

into:

$('#overlay').css({'height': pageHeight + 'px', 'width': '100%'});

Ok, thanks for the info. I'll have a look. If I manage to find a solution I'll post it here for discussion.

Update: Safari has the same scrollbar issue but only vertically; the height of the overlay keeps increasing indefinitely.
Regarding the keys: We should look into the possibility to capture the keystrokes before the browser responds to them

I noticed that huddletogether.com didn't have this issue, so I grabbed their version of getPageSize() and restored my change to showData().

That seems to work perfectly. This is their version, minimally modified for easy copy-paste into lightbox.js:

  getPageSize: function() {

	     var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;

		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth;
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else {
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){
			pageWidth = xScroll;
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	},

I've put both functions next to each other in WinMerge, and noticed the following as the only real difference:

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth) {
  pageWidth = xScroll;
} else {
  pageWidth = windowWidth;
}

In the Drupal version these are reversed.

Could this be the solution? The problem with the vertical scrollbar remains however, but that is less of a nuisance.

Marked #359562: getPageSize() weirdness as a duplicate - includes potential patch.

I also was experiencing this problem (image shifting due to increasing overlay div width) and rectified it by using the code from #8 in lightbox.js.

I'm not familiar with the patching process, so I'm wondering if the patch in the issue referenced in #9 includes the same correction and if it will be included in the next release of the lightbox2 module. Would hate for the site I'm working on to break down the road because I hacked the module.

Thanks for any insight.

I'm having this problem with lightbox2 1.9 but not only with keyboard surfing but also when I click over the arrows.

I have come to this thread suffering with scrollbars appearing in firefox when lightbox is active. I have tried the change in #8 and while it stops the scrollbars appearing the image it is displaying also extends past the bottom of the browser size.

It also completely bOrks lightbox in IE8 on Win7. When you click an image that should be lightboxed it just opens in a new window.

In Windows Vista IE7 window and slideshow scrolls via cursorkeys at the same time!

I've tested this problem on both Firefox and Chrome. It seems the screen got shifted because the default arrow key handlers got executed too. Simply returning false fixes this.