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
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
