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();

});

  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.