PDA

View Full Version : Lightbox Image Viewer: overlay.png is cut off on IE



wakame
06-13-2006, 07:00 AM
Lightbox Image Viewer
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

Hello,

I'm tring to use this script, and it works 95% good so far. I am very happy about it.
There is, though, one problem I can't figure out.

When I have several photos in a quite long page, and click to open the bigger photo on top of the page with using this script, the transparancy background png is cut off on IE. (works fine on Firefox though)

The Overlay.png fills out the window. But once I scrolled down to see the rest of page, the Overlay.png is cut off.
When I click the images placed on the bottom of the page, the Overlay.png won't show up (though, the image is shown up on the very top of the page - I just can't see).


Could anyone know why that's happen?
Thanks in advance.

djr33
06-13-2006, 07:01 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

wakame
06-13-2006, 04:51 PM
http://staging.thechicoproject.com/ridgehomes/compWebsite/amenities.html

Thank you in advance.

jscheuer1
06-13-2006, 05:42 PM
In lightbox.js, replace this:


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.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 = windowWidth;
} else {
pageWidth = xScroll;
}


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

with this:


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 if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
} else { // Explorer Mac...would also work in 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.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 = windowWidth;
} else {
pageWidth = xScroll;
}


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

wakame
06-13-2006, 06:29 PM
Awesome!
It works on IE. Thank you so much.

jscheuer1
06-13-2006, 07:01 PM
The real problem is that you used so much absolute positioning in your layout. Opera will still have the same problem IE did.