Lightbox not filling entire window in IE

**jc_gmk** · 08-07-2007, 03:51 PM

1) Script Title:
Lightbox image viewer 2.03

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

I have installed the lightbox image viewer on my website which works fine,
Except for if I scroll down the page first.

For example:
if my screen resolution is set to 1024 x 768 but i have a list of images that fills a table of about 2000px in height, i would need to scroll to the bottom of the list before I can select the last one in the list.
On selecting the last image in the list, the lightbox image displays ok but the dark grey background only fills the top half of the window (the part I just scrolled down from)
Is there anyway I can change this using css?
I'm not too good with javascript so I hope I don't have to change too much of the script.

Hope this makes sense!

I have tried this on IE6 and IE7 and they both do the same.
It works perfectly on FF, Opera and Safari for windows.

**jscheuer1** · 08-07-2007, 03:54 PM

First make sure you are using a DOCTYPE that puts IE into compliance mode. If you are still having a problem, post a link to your problem page.

**jc_gmk** · 08-08-2007, 07:42 AM

What DOCTYPE do you suggest for using lightbox?

I am currently using this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**jc_gmk** · 08-08-2007, 10:26 AM

After alot of stripping apart my code I have finally found out what the problem was!
The table of images I was showing was contained within a DIV which was positioned absolutely.

I stripped the code back to just one DIV and one table and found that if I changed the div to 'relative' positioning the problem would go away.

However, if that one DIV and table are placed in any parent DIV's with absolute positioning then problem re-occurs!

Anyone have and Ideas how to get around this as I need to place this table in an absolute positioned DIV.

Thanks

**jc_gmk** · 08-08-2007, 01:38 PM

Here is a link to a test page to help you understand the problem:

http://test.bearholding.co.uk/

If you click on one of the links at the top it is fine
but as soon as you scroll down it doesn't work properly.

Note: This only seems to be a problem in IE 6 & 7 that I know of.

**jscheuer1** · 08-08-2007, 01:41 PM

I'd still like a link to the problem page, that's what I did ask for if the problem wasn't the DOCTYPE. I don't think the problem is the DOCTYPE, though it may still be. That DOCTYPE isn't really fully supported by IE, but I think it at least triggers compliance mode, so should be OK.

I would use:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

or:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But, as I say, I don't think that is the problem. I have fixed this issue in other situations by finding a different way of ascertaining page width, height and scroll state for IE, but I'm still not certain that is necessary here.

A link to the page, please.

**jc_gmk** · 08-08-2007, 01:49 PM

Have tried that DOCTYPE already, no luck.

Here's the link to a test page, had already put the link on there before your reply.

http://test.bearholding.co.uk/

Thanks

**jscheuer1** · 08-08-2007, 02:12 PM

Give this a shot, find the function in lightbox.js that looks like this (starts around line #634) and make the change indicated in red:

Code:

function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		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
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.scrollHeight;
	} 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 = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

**jc_gmk** · 08-08-2007, 02:26 PM

almost!
The background now works properly but the image opens up abit to far down the page i.e the bottom quarter of the image is cut off!

I've uploaded the code so you can see for yourself.

**jscheuer1** · 08-08-2007, 02:52 PM

I don't see any graceful way around this. Apparently the dimensions used by the lightbox script are too interrelated for such a simple fix.

What I would recommend, unless a better way can be found, (first put the script back the way it was) is to setup a conditional comment to initiate a unique variable in IE:

Code:

<!--[if IE]>
<script type="text/javascript">

var blah='bleh';

</script>
<![endif]-->

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/sc . . .

Then where the lightbox script goes to get the height for the overlay:

Code:

	start: function(imageLink) {	

		hideSelectBoxes();
		hideFlash();

		// stretch overlay to fill page and fade in
		var arrayPageSize = getPageSize();
if(typeof blah=='undefined')
		Element.setHeight('overlay', arrayPageSize[1]);
else
overlay.style.height=document.documentElement.scrollHeight+'px';

		new Effect.Appea . . .

and:

Code:

	updateDetails: function() {
	
		Element.show('caption');
		Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
		
		// if image is part of set display 'Image x of x' 
		if(imageArray.length > 1){
			Element.show('numberDisplay');
			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
		}

		new Effect.Parallel(
			[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 
			  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ], 
			{ duration: resizeDuration, afterFinish: function() {
				// update overlay size and update nav
				var arrayPageSize = getPageSize();
if(typeof blah=='undefined')
		Element.setHeight('overlay', arrayPageSize[1]);
else
overlay.style.height=document.documentElement.scrollHeight+'px';
				myLightbox.updateNav();
				}
			} 
		);
	},

Thread: Lightbox not filling entire window in IE

Thread Tools

Search Thread

Lightbox not filling entire window in IE

Bookmarks

Bookmarks

Posting Permissions