CSS / jQuery Vertically and Horizontally Center DIV
Posted
by aherrick
on Stack Overflow
See other posts from Stack Overflow
or by aherrick
Published on 2010-04-03T04:35:21Z
Indexed on
2010/04/03
4:43 UTC
Read the original article
Hit count: 371
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>
© Stack Overflow or respective owner
