filamentgroup / jquery-equal-heights

This repository is unmaintained. Please see the included readme for more information.

⚠️ This project is archived and the repository is no longer maintained.

---

jQuery Equal Heights

A script to "equalize" the heights of boxes within the same container and create a tidy grid — with little overhead.

Related blog post: http://filamentgroup.com/lab/setting_equal_heights_with_jquery/

jquery-equal-heights's Issues

Run after AJAX content is loaded

I'm trying to get this to work alongside using your awesome Ajax-Include-Pattern, but can't get it to calculate the correct height. I'm guessing that it is failing because the Equal Height code can't see the AJAX inserted code. How would I go about getting this to run once the AJAX has inserted the correct content?

$(document).ready(function() {

    // Prevent world from ending on any href="#" a tags
    $('a[href="#"]').click(function(event) {
        event.preventDefault();
    });
    $("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();
    $('.mega-menu').equalHeights(false);
});

Optimize via Caching

I found an extracted version of your equalHeights function on a recent project while doing a performance audit. When viewing the site's waterfall table via webpagetest.org, IE8's slow js engine showed a blocking gap [1] of 4.1 seconds (it was a js-intesive site) . Once the function was removed, the gap went down to 1.3 seconds. A MAJOR improvement.

The largest contributing factor turned out to be the multiple height() queries. We had 13 top-level menu items that each had a dropdown containing 1-5 columns of list items, totaling 60 columns in all. That meant the DOM had to be recalculated 120 times. Fortunately, we were able to substitute the function with a css fix. Barring a css fix, at least caching the height() query (among other things) would have cut the performance hit significantly.

My optimized suggestion: https://gist.github.com/1660062

[1]: A gap where all assets are blocked from downloading while javascript is executed.

seems to work only for a single instances?

I want to have two container with its child set to equal height. Seems only the first one works. If i take off the first one, the 2nd works.

Cant have multiple i guess.

Didn't work with Jquery 1.9.x

The plugin does not work properly with $.noConflict() option

The plugin structure needs to change to take advantage of immediate functions in order to protect $ scope as per best practice, basic plugin creation.