advanced code snippet search

Posted By

mihael on 07/08/10


Tagged

align vertical


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jfherring


jQuery plugin: Vertical Align

 / Published in: jQuery
 

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

You need to login to post a comment.