Advanced Search

jQuery plugin: Vertical Align

/ Published in: jQuery
Save to your folder(s)
jQuery plugin for vertical centering the matched elements.

Instructions:

1. Save the code into file: jquery.verticalAlign.js
2. Include "jquery.js" and "jquery.verticalAlign.js" in the head section of your document
3. use like this:

jQuery(document).ready(function($) {

$("#someDiv").verticalAlign();

});

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. (function($){
  2.  
  3. 	$.fn.extend({ 
  4.  
  5.  		verticalAlign: function() {
  6.  
  7. 			//Iterate over the current set of matched elements
  8.     		return this.each(function() {
  9.  
  10. 				var obj = $(this);
  11.  
  12. 				// calculate the new padding and height
  13. 				var childHeight = obj.height();
  14. 				var parentHeight = obj.parent().height();
  15. 				var diff = Math.round( ( (parentHeight - childHeight) / 2) );
  16.  
  17. 				// apply new values
  18. 				obj.css( { "display": "block", "margin-top": diff } );
  19.  
  20.     		});
  21.     	}
  22. 	});
  23.  
  24. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.