Side navigation
#67 closed bug (fixed)
Opened July 15, 2006 07:31AM UTC
Closed November 17, 2006 10:20PM UTC
Last modified March 15, 2012 06:26PM UTC
the center() function doesn't work when the parent object is body
| Reported by: | kepler@neighborwebma | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | core | Version: | |
| Keywords: | center | Cc: | |
| Blocked by: | Blocking: |
Description
Here is the fixed function I use:
$.fn.center = function(f) {
return this.each(function(){
if ( !f && this.nodeName == 'IMG' &&
!this.offsetWidth && !this.offsetHeight ) {
var self = this;
setTimeout(function(){
$(self).center(true);
}, 13);
} else {
var s = this.style;
var p = this.parentNode;
var b = document.body;
var t = 0;
if ( $.css(p,"position") == 'static' )
p.style.position = 'relative';
s.position = 'absolute';
if ( ! isNaN(parseInt($.css(p,"width"))) )
{
t = parseInt(($.css(p,"width") - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
}
else if ( ! isNaN( b.clientWidth ) )
{
t = parseInt((b.clientWidth - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
}
if ( ! isNaN(parseInt($.css(p,"height"))) )
{
t = parseInt(($.css(p,"height") - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
}
else if ( ! isNaN( b.clientHeight ) )
{
t = parseInt((b.clientHeight - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
}
}
});
};
Attachments (2)
Change History (4)
Changed July 15, 2006 09:24PM UTC by comment:1
Changed July 16, 2006 06:13PM UTC by comment:2
sending the example html and code again... hopefully preserving formatting:
Here is the test.html file:
<html>
<head>
<title>Center Example</title>
<style type="text/css">
body {
background: #FFF;
}
div#content {
width: 400px;
top: 0px;
border: #000 solid 1px;
background: #EEE;
color:#000;
}
</style>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// centers content div on load or resize
$("div#content").center("horizontal");
$(window).resize(function(){
$("div#content").center("horizontal");
});
});
</script>
</head>
<body>
<div id="content">
test of centering the content div.
</div>
</body>
</html>
Here is my version of the center() function:
$.fn.center = function(f) {
return this.each(function(){
if ( !f && this.nodeName == 'IMG' &&
!this.offsetWidth && !this.offsetHeight ) {
var self = this;
setTimeout(function(){
$(self).center(true);
}, 13);
} else {
var s = this.style;
var p = this.parentNode;
var b = document.body;
var t = 0;
if ( f != "vertical" )
{
if ( $.css(p,"position") == 'static' )
p.style.position = 'relative';
s.position = 'absolute';
if ( ! isNaN(parseInt($.css(p,"width"))) )
{
t = parseInt(($.css(p,"width") - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
else
s.left = "0px";
}
else if ( ! isNaN( b.clientWidth ) )
{
t = parseInt((b.clientWidth - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
else
s.left = "0px";
}
}
if ( f != "horizontal" )
{
if ( ! isNaN(parseInt($.css(p,"height"))) )
{
t = parseInt(($.css(p,"height") - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
else
s.top = "0px";
}
else if ( ! isNaN( b.clientHeight ) )
{
t = parseInt((b.clientHeight - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
else
s.top = "0px";
}
}
}
});
};
Changed August 26, 2006 04:59AM UTC by comment:3
| summary: | the clear() function doesn't work when the parent object is body → the center() function doesn't work when the parent object is body |
|---|
Changed November 17, 2006 10:20PM UTC by comment:4
| resolution: | → fixed |
|---|---|
| status: | new → closed |
I'm fairly certain that this has been resolved in SVN.
The center function does not work in Netscape 7 when the object being centered is directly under the <body> tag. Opera also centers vertically, overriding the top: 0; style setting. Here is an example:
<html>
<head>
<title>Center Example</title>
<style type="text/css">
body {
background: #FFF;
}
div#content {
width: 400px;
top: 0px;
border: #000 solid 1px;
background: #EEE;
color:#000;
}
</style>
<script src="javascript/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// centers content div on load or resize
$("div#content").center("horizontal");
$(window).resize(function(){
$("div#content").center("horizontal");
});
});
</script>
</head>
<body>
<div id="content">
test of centering the content div.
</div>
</body>
</html>
Here is a better center() function which accepts a parameter of "horizontal" or "vertical". It behaves as before if no parameter is passed. It also won't create negative left: or top: settings.
$.fn.center = function(f) {
return this.each(function(){
if ( !f && this.nodeName == 'IMG' &&
!this.offsetWidth && !this.offsetHeight ) {
var self = this;
setTimeout(function(){
$(self).center(true);
}, 13);
} else {
var s = this.style;
var p = this.parentNode;
var b = document.body;
var t = 0;
if ( f != "vertical" )
{
if ( $.css(p,"position") == 'static' )
p.style.position = 'relative';
s.position = 'absolute';
if ( ! isNaN(parseInt($.css(p,"width"))) )
{
t = parseInt(($.css(p,"width") - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
else
s.left = "0px";
}
else if ( ! isNaN( b.clientWidth ) )
{
t = parseInt((b.clientWidth - $.css(this,"width"))/2);
if ( t > 0 )
s.left = t + "px";
else
s.left = "0px";
}
}
if ( f != "horizontal" )
{
if ( ! isNaN(parseInt($.css(p,"height"))) )
{
t = parseInt(($.css(p,"height") - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
else
s.top = "0px";
}
else if ( ! isNaN( b.clientHeight ) )
{
t = parseInt((b.clientHeight - $.css(this,"height"))/2);
if ( t > 0 )
s.top = t + "px";
else
s.top = "0px";
}
}
}
});
};