#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 17 years ago by
Attachment: | center.txt added |
---|
Changed 17 years ago by
Attachment: | center.2.txt added |
---|
better clear() function which accepts "horizontal" and "vertical" param
comment:1 Changed 17 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 17 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 16 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 16 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.