Bug Tracker

Modify

Ticket #67 (closed bug: fixed)

Opened 8 years ago

Last modified 2 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 7 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.