Today we will have a look at how we can center the element on the page and adjust it's position when the browser window is re-sized. To start with let's create an element - I'll use a simple form with two fields and submit button: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Center element with jQuery</title> <meta name="description" content="Center element with jQuery" /> <meta name="keywords" content="Center element with jQuery" /> <link href="/css/core.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <form action="" method="post" id="center"> <table cellpadding="0" cellspacing="0" border="0" class="tbl_insert"> <tr> <th><label for="full_name">Full name: *</label></th> <td> <input type="text" name="full_name" id="full_name" class="field" value="" /> </td> </tr> <tr> <th><label for="email">Email address: *</label></th> <td> <input type="email" name="email" id="email" class="field" value="" /> </td> </tr> <tr> <th> </th> <td> <input type="submit" id="submit" class="button" value="Submit" /> </td> </tr> </table> </form> <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> </body> </html> Make sure that you have already downloaded the latest version of jQuery and placed it inside of the js folder. In the same folder create another file called core.js then create the folder called css and inside of this folder file called core.css . Now open the core.css and put the following css definitions: * { padding: 0; margin: 0; border: none; outline: none; } body { text-align: center; font-family: Arial Verdana Sans-serif; font-size: 12px; } form { padding: 20px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #eee; position: fixed; } thtd { text-align: left; vertical-align: top; } th { padding: 3px 10px 3px 0; white-space: nowrap; } td { padding: 3px; } .field { padding: 5px; border: solid 1px #aaa; width: 250px; } .button { padding: 5px 10px; border: solid 1px #aaa; background: #eee; cursor: pointer; } As you can see we've specified the fixed position for our form and applied padding of 20px to it. We didn't however define the width - so at the moment the form will go from one edge of the screen to the other. To change this open core.js and start with the following: $(function() { systemObject.center($('#center')); }) Now above the $(function(){ create a new object called systemObject : var systemObject = { objWidth : 0 objHeight : 0 center : function(obj) { if (obj.length > 0) { systemObject.objWidth = obj.children('table').width(); obj.width(systemObject.objWidth); systemObject.objHeight = obj.height(); var windWidth = $(window).width(); var windHeight = $(window).height(); var posTop = (windHeight/2)-((systemObject.objHeight + 40)/2) + 'px'; var posLeft = (windWidth/2)-((systemObject.objWidth + 40)/2) + 'px'; obj.css({ 'top' : posTop 'left' : posLeft }); } } } Here we simply define new object and create two properties and one method. The properties will store the width and height of our form - (or rather table element). The center method which receives one parameter represented by the form object first checks whether the form has been found on the page then we get the width of the child table and assign it to our form. We also get the height of the form object and the width and height of the browser window. The important thing to understand here is that the dimensions of the form do not contain the padding of 20px which we've assigned to it in our css file. Once we have all of the dimensions we create two variables which represent the top and left position of the form where we first divide the height of the window and the height of the form plus padding by half and append the 'px' at the end of it. The same approach is used for the left position Lastly we are assigning the position to our form object by the use of css() method. If you test you will see that the form is now centered on the page. Next thing is to keep it centered when we re-size browser window. Back in the document ready section after the: systemObject.center($('#center')) type: $(window).resize(function() { systemObject.resize($('#center')); }) Then add the new method to our object after coma: resize : function(obj) { var windWidth = $(window).width(); var windHeight = $(window).height(); var posLeft = (windWidth/2)-((systemObject.objWidth + 40)/2) + 'px'; var posTop = (windHeight/2)-((systemObject.objHeight + 40)/2) + 'px'; obj.css({ 'top' : posTop 'left' : posLeft }); } Your entire core.js file should now look like this: var systemObject = { objWidth : 0 objHeight : 0 center : function(obj) { if (obj.length > 0) { systemObject.objWidth = obj.children('table').width(); obj.width(systemObject.objWidth); systemObject.objHeight = obj.height(); var windWidth = $(window).width(); var windHeight = $(window).height(); var posTop = (windHeight/2)-((systemObject.objHeight + 40)/2) + 'px'; var posLeft = (windWidth/2)-((systemObject.objWidth + 40)/2) + 'px'; obj.css({ 'top' : posTop 'left' : posLeft }); } } resize : function(obj) { var windWidth = $(window).width(); var windHeight = $(window).height(); var posTop = (windHeight/2)-((systemObject.objHeight + 40)/2) + 'px'; var posLeft = (windWidth/2)-((systemObject.objWidth + 40)/2) + 'px'; obj.css({ 'top' : posTop 'left' : posLeft }); } }; $(function() { systemObject.center($('#center')); $(window).resize(function() { systemObject.resize($('#center')); }); }) As you can see our new re-size method simply updates the same values we've used in the center method this way every time we re-size the browser window the new top and left position will be generated and assigned to our form / element.
Learn how to help your child cope with disappointing exam results, focusing on emotional support, practical strategies, and future planning.
Adopt growth mindsets for a purposeful transition to a fulfilling new chapter. Explore transformative insights on navigating change and fostering pers
Discover the BU Sport Scholarship for undergraduate and postgraduate athletes at Bournemouth University, offering up to £5,000 for sporting excellenc
In a significant move towards educational empowerment, the Delhi government has announced an expansion of its free coaching scheme for NEET (National
NEED HELP?
2K Views
Report Spam
9 Answers
