#67 closed bug (fixed)
the center() function doesn't work when the parent object is body
| Reported by: | 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 (6)
Changed 11 years ago by
| Attachment: | center.txt added |
|---|
Changed 11 years ago by
| Attachment: | center.2.txt added |
|---|
better clear() function which accepts "horizontal" and "vertical" param
comment:1 Changed 11 years ago by
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";
}
}
}
});
};
comment:2 Changed 11 years ago by
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";
}
}
}
});
};
comment:3 Changed 11 years ago by
| 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 |
|---|
comment:4 Changed 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
I'm fairly certain that this has been resolved in SVN.
new center() function that accepts "horizontal" or "vertical" param.