SawRed Development Blog.

Equality: A jQuery Plugin


Posted on 4th November, by Matt in jQuery. No Comments

Equality was written to fill what I believed to be a gap in the logic of Equal Heights. Like Equal Heights, the purpose of Equality is to set height of multiple elements equal to one another, however, unlike Equal Heights, these elements do not necessarily have to be in the same container. This is a very minimalistic approach to the matter, however it serves its purpose for my projects.

Equality calculates the height for the selected elements and sets all selected elements to that height with the option to add a specified number of pixels to the end result.

The Script:

(function($) {
	$.fn.equality = function(options){
    	var height,elements;
    	elements = $(this);
    	options = $.extend({},$.equality.defaults, options);
    	height = options.height;
        $(this).each(function() {
            $(this).height() > height && (height = $(this).height() + options.addOn)
        });
        options.minHeight == true ? elements.css({
            minHeight: height
        }) : elements.css({
            height: height
        });
    	return $(this);
	};
	$.equality = {
		defaults : {
			height: true,
			minHeight : false,
			addOn : 0
		}
	};
})(jQuery);

Usage & Options:

$('.myElements, #that, .iWant, #toBeEqual').equality(
height: true, // true/false -- default true -- set the height attribute of selected elements
minHeight: false, // true/false defaults false -- also/alternatively set min-height of selected elements
addOn: 0 // defaults 0 -- numeric value representing the amount of pixels you would like to add onto the final height -- do NOT use 'px'
);




Leave a Reply

Connect with Facebook