CSS / jQuery Vertically and Horizontally Center DIV
- by aherrick
I'm trying to vertically and horizontally center this div even when there is content to scroll and the user is scrolling down the page. The following test works fine in IE, but in Firefox I get a weird flickering affect when hovering over the thumbnail image. Any thoughts?
<html>
<head>
<title>aj</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// img preview
$('.img').hover(function() {
if (!$('#overlay').length) {
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
zIndex: 100,
height: $(window).height() + 'px'
}).appendTo('body');
$('<div id="item" />').css({
border: '7px solid #999',
height: '500px',
width: '500px',
top: '50%',
left: '50%',
position: 'absolute',
marginTop: '-250px',
marginLeft: '-250px'
}).append('<img src="' + $(this).attr('rel') + '" alt="img" />').appendTo('#overlay');
}
}, function() {
$('#overlay').remove();
});
});
</script>
</head>
<body>
<img class="img" src="http://ajondeck.net/temp/paperboy_thumb.gif" rel="http://ajondeck.net/temp/paperboy.gif"
alt="image" />
</body>
</html>
