Bug Tracker

Ticket #67 (closed bug: fixed)

Opened 8 years ago

Last modified 3 years ago

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 Download (1.3 KB) - added by kepler@… 8 years ago.
new center() function that accepts "horizontal" or "vertical" param.
center.2.txt Download (1.3 KB) - added by kepler@… 8 years ago.
better clear() function which accepts "horizontal" and "vertical" param

Change History

Changed 8 years ago by kepler@…

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

Changed 8 years ago by kepler@…

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

comment:1 Changed 8 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 8 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";
				}
			}
		}
  });
};

comment:3 Changed 8 years ago by john

  • Summary changed from the clear() function doesn't work when the parent object is body to the center() function doesn't work when the parent object is body

comment:4 Changed 8 years ago by john

  • Status changed from new to closed
  • Resolution set to fixed

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

Note: See TracTickets for help on using tickets.