Re: [jQuery] To Klaus: Lightbox elegant centering solution?

Benjamin Yu schrieb:
> Klaus,
> 
> Arg, I wish I read your post before I spent the time implementing and
> testing thickbox's mechanism (and sending out new links). I shall have
> to look at your lightbox solution, can you link me to your solution?
> 
> Thanks,
> Ben

Hi Benjamin,

strange, I couldn't find the post in the mailing list archive on 
jquery.com, so I'm reposting it. Here are the changes I made in the 
Thickbox script listed in a more generic way (Gilles is also interested 
for another solution).

Let #box be the element/box that is to be centered:


1. CSS:

#box {
      position: fixed;
      top: 50%;
      left: 50%;
}


2. Remove scroll/resize event handlers:

$(window).scroll( funcRefToPositionBox );
$(window).resize( funcRefToPositionBox );


3. Function to position box:

function positionBox() {
      var boxWidth = ...; // retrieve box width here
      var boxHeight = ...; // retrieve box height here
      $('#box').css({marginLeft: '-' + parseInt(boxWidth / 2) +
'px', width: boxWidth + 'px'});
      if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')
) { // take away IE6
          $('#box').css({marginTop: '-' + parseInt(boxHeight / 2) +
'px'});
      }
}

This function pushes the box half of its width/height to the left/top 
from the middle so that it is exactly centered. It has to be called once 
on opening the box.


4. Emulate fixed positioning for IE6:

* html #box {
      position: absolute;
      margin-top: expression(0 - parseInt(this.offsetHeight / 2) +
(boxMargin = document.documentElement &&
document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

Based on http://www.howtocreate.co.uk/fixedPosition.html

I use the Star Selector hack to filter IE7, which supports fixed
positioning. Because this is invalid CSS I would put that in a
Conditional Commented extra style sheet.

If you feel uncomfortable with an extra style sheet you could also set 
the expression inline (untested):

if ( jQuery.browser.msie && typeof XMLHttpRequest == 'function' )
     $('#box')[0].style.setExpression(
         'margin-top',
         '0 - parseInt(this.offsetHeight / 2) +
(TBWindowMargin = document.documentElement &&
document.documentElement.scrollTop || document.body.scrollTop)'
     );

Note, that IE chokes on the "+ 'px'" in setExpression, leave it out 
here, it seems to be implicit.


Thats it.


You can see how it behaves here:
http://beta.plazes.com/plaze/cd21e1717f61ba9cf9df9006038da172/

Just click on a  thumbnail in the pictures section or in photos nearby 
and scroll/resize the page...


Another good idea is to set overflow to hidden on the html element while 
showing the greybox - that would completely remove the scrollbar which 
is more or less useless anyway.


-- Klaus