Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Lightbox not filling entire window in IE

  1. #1
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default Lightbox not filling entire window in IE

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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">

  4. #4
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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

  5. #5
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2007
    Location
    England, UK
    Posts
    235
    Thanks
    3
    Thanked 6 Times in 6 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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();
    				}
    			} 
    		);
    	},
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •