Lightbox compatible with older browsers

The fixed value of the position attribute is a problem for older brwosers. If not used, must be added to the vertical position the offset of the top of the window on the page.

Then we touch one of the great problems of compatibility between browsers: each uses different properties.
The search for consistency led us to build out a test page, where the tests are fairly inconclusive.

Aligning the top of the lightbox with Gecko and Webkit

With browsers using these renderers, including Firefox for the first and Chrome for the second, the position must be "fixed". When this occurs, certain properties position objects based on the current view regardless of its position in the page, which suits us perfectly.

We must then:

Get the height of the current view.
Add an offset, which depends on the size of the box.

What is done with the following code, firstly we calculate the height:

if(window.innerHeight) return(window.innerHeight);
if(document.documentElement && document.documentElement.clientHeight) 
  return(document.documentElement.clientHeight);
if(document.body) return(document.body.clientHeight); 
return 50;

Then addition of an offset in the view and change of the position to fixed.

box.style.display='block';
var top =  (viewHeight() - box.offsetHeight ) / 2;    
box.style.top = top + 'px';
box.style.position='fixed'; 
filter.style.position='fixed';  ';

We also assign to filter this fixed position: it can so cover the entire page, which is not the case otherwise.

Offset with old browsers

The attribute fixed is not implemented in IE, but we can do without it because it is possible to find the offset of the view on the page:

box.style.display='block';
x = document.documentElement.scrollTop + document.body.scrollTop + 
box.offsetHeight / 4;
box.style.top = x + "px";
filter.style.top = document.documentElement.scrollTop + document.body.scrollTop;

Unlike other browsers, the top property has an absolute value on the page.
The same with the filter that applies only to the view and not to the page.

Demonstration

The code of the box in the page is the same as for the demo showing images with lightbox. Only the JavaScript code is changed.

To view an image in a lightbox, click on the corresponding thumbnail ...

Nom de l'image

The scrolling code will be integrated into further versions of the lightbox: Ajax, shaded, form.