Ticket #67 (closed bug: fixed)
the center() function doesn't work when the parent object is body
| Reported by: | kepler@… | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | core | Version: | |
| Keywords: | center | Cc: | |
| Blocking: | Blocked by: |
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
-
center.txt
(1.3 KB) -
added by kepler@… 7 years ago.
- new center() function that accepts "horizontal" or "vertical" param.
-
center.2.txt
(1.3 KB) -
added by kepler@… 7 years ago.
- better clear() function which accepts "horizontal" and "vertical" param
Change History
Changed 7 years ago by kepler@…
-
attachment
center.txt
added
Changed 7 years ago by kepler@…
-
attachment
center.2.txt
added
better clear() function which accepts "horizontal" and "vertical" param
comment:1 Changed 7 years ago by kepler@…
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 7 years ago by kepler@…
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";
}
}
}
});
};
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
new center() function that accepts "horizontal" or "vertical" param.