Skip to main content

Bug Tracker

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)
  • center.2.txt (1.3 KB) - added by kepler@neighborwebma July 15, 2006 09:19PM UTC.

    better clear() function which accepts "horizontal" and "vertical" param

  • center.txt (1.3 KB) - added by kepler@neighborwebma July 15, 2006 09:18PM UTC.

    new center() function that accepts "horizontal" or "vertical" param.

Change History (4)

Changed July 15, 2006 09:24PM UTC by kepler@neigh comment:1

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";

}

}

}

});

};

Changed July 16, 2006 06:13PM UTC by kepler@neigh 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 john comment:3

summary: the clear() function doesn't work when the parent object is bodythe center() function doesn't work when the parent object is body

Changed November 17, 2006 10:20PM UTC by john comment:4

resolution: → fixed
status: newclosed

I'm fairly certain that this has been resolved in SVN.