jquery.equalheight.js

/*
 *  EqualHeight.js - v1.0.0
 *  https://github.com/JorenVanHee/EqualHeight.js
 *
 *  Made by Joren Van Hee
 *  Under MIT License
 */
;(function ($, window, document, undefined) {

    var pluginName = "equalHeight",
        defaults = {
            wait: false,
            responsive: true,
            columns: 0,
            height: "min-height"
        };

    function Plugin(elements, options) {
        this.elements = elements;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.active = false;

        this.init();
    }

    Plugin.prototype = {

        init: function () {
            if (!this.options.wait) {
                this.start();
            }

            if (this.options.responsive) {
                $(window).on("resize", $.proxy(this.onWindowResize, this));
            }
          
            if(!this.options.columns) {
                this.options.columns = this.elements.length;
            }
        },

        /**
         * Set the height of each element to the height of the highest element.
         */
        magic: function () {
            // Reset min-height and height. Otherwise we will run in trouble if
            // we execute this function a second time (on resize for instance).
            this.reset();

            for (var n = 0, l = this.elements.length; n < l; n += this.options.columns) {
                // Store the height of the highest element.
                var topHeight = 0,
                    chunk = Array.prototype.slice.call(this.elements, n, n + this.options.columns);

                // Find highest element and store the height.
                for (var i = 0; i < chunk.length; i++) {
                    var height = $(chunk[i]).height();
                    topHeight = height > topHeight ? height : topHeight;
                }

                // Set min-height on elements.
                for (var j = 0; j < chunk.length; j++) {
                    var element = $(chunk[j]);

                    // Height behaves like min-height when display is table-cell.
                    if (element.css("display") === "table-cell") {
                        element.css("height", topHeight);
                    } else {
                        element.css(this.options.height, topHeight);
                    }
                }
            }
        },

        /**
         * Remove all styles added by this plugin.
         */
        reset: function () {
            this.elements.css("height", "");
            this.elements.css(this.options.height, "");
        },

        /**
         * Start the plugin.
         */
        start: function () {
            this.active = true;
            this.magic();
        },

        /**
         * Stop the plugin and reset the elements.
         */
        stop: function () {
            this.active = false;
            this.reset();
        },

        /**
         * Call the magic method on window resize, if allowed.
         */
        onWindowResize: function () {
            if (this.active) {
                this.magic();
            }
        }

    };

    // Release the beast
    $.fn[pluginName] = function (options) {
        return new Plugin(this, options);
    };

})(jQuery, window, document);