Skip to content

Instantly share code, notes, and snippets.

@oobleck
Created March 9, 2014 03:00
Show Gist options
  • Save oobleck/9442343 to your computer and use it in GitHub Desktop.
Save oobleck/9442343 to your computer and use it in GitHub Desktop.
jQuery: My element height equalizing plugin.
/**
* jQuery plugin to equalize the dimensions of elements within a parent container.
* Author: Spencer Rhodes <spencer at spencer dash rhods dot com>
* License: MIT
*
* opts.method = ['height', 'outerHeight', 'innerHeight', 'width', 'outerWidth', 'innerWidth'].
* Defaults to 'outerHeight'.
* opts.children = selector for elements to equalize. Defaults to immediate children.
* opts.adjust = integer to adjust the final max value by. Defaults to 0
* opts.reset = not used
*/
;(function($, window, document, undefined) {
$.fn.equalHeight = function(opts) {
// Run this on the parent of the elemnts you want equalized
var _defaults = {
reset : false,
method : 'outerHeight',
children : false,
adjust : 0,
after : false,
afterEach : false
};
opts = $.extend({}, _defaults, opts);
var dimensionType = /eight/i.test(opts.method) ?
'height' :
'width';
this.each(function(i, el) {
var $this = $(el);
var $children = opts.children ?
$this.find(opts.children) :
$this.children();
var max = 0;
var dimension = 0;
var $child;
if (opts.reset) { $children.css(dimensionType, ''); }
$children.each(function(i, el) {
$child = $(el);
dimension = $child[opts.method]();
max = (dimension > max) ? dimension : max;
});
// $children.css(dimensionType, max + opts.adjust + 'px');
$children[opts.method](max + opts.adjust);
opts.afterEach && opts.afterEach();
});
opts.after && after();
return this;
};
}(jQuery, this, this.document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment