Mm Plugin: Equal Height Columns

Making columns that have the same height without explicitly setting a height on each of them has always been a web design challenge. Doing this in a way that is full responsive so that content never overflows and the heights are equal on all screen sizes has always been an extreme challenge. We’re pleased to announce that this challenge has finally been solved with our Equal Height Columns plugin for WordPress.

Our Equal Height Columns plugin is simple but very powerful. Once it is activated it adds a settings page where you input a CSS selector for the elements you want to have the same height. You can also input a breakpoint below which you do not want the plugin to equalize the heights. Simple as that.

This information gets passed to a jQuery script that does all the magic. When the page loads the script measures the height of all the items that match the selector and sets each item’s height to match the height of the tallest item. Then it sets up some event listeners for window resize and orientation change and re-equalizes the heights whenever these events are triggered.

Equalizing the heights on page load and window resize was good, but we took it a step further and added some extra functionality to make it bulletproof:

– We check the selector that was input and catch any errors that happen if the selector is malformed so that we never stop JavaScript execution due to bad input. This plugin will never break your site!
– We added some debouncing on the resize and orientation change events so that the plugin only re-triggers once as you resize the window
– It supports multiple selectors at a time so that multiple collections if items can be equalized without affecting each other
– It always grab the items fresh from the DOM so that it will still work in situations where a new item has been added to the collection via AJAX or cloned with jQuery
– We added a custom event ‘equalheights’ that can be used to easily trigger the equalizing manually with jQuery’s trigger method like so:


$( window ).trigger( 'equalheights' );

There are also two jQuery methods that you can call directly, initEqualHeights() and equalizeTheHeights(). The difference between them is that initEqualHeights() sets up all of the event handlers for when the window resizes and when the ‘equalheights’ event is triggered on the window, but equalizeTheHeights() simply does direct equalizing of the heights without involving any events. Both methods can be used in the same way and support the same 3 args:


$( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint );

$( '.selector' ).equalizeTheHeights( minHeight, maxHeight, breakPoint );

There is also a filter that allows you to programmatically set up the selectors and args you want to use, which allows you set certain elements to always equalize heights regardless of whether their selector has been entered on the settings page:


add_filter( 'equal_height_columns_elements', 'custom_ehc_elements' );
function custom_ehc_elements( $elements ) {

    $elements['element-groups']['custom'] = array(
        'selector'   => '.ehc-target', // Selector goes here.
        'breakpoint' => '768',
    );

    return $elements;
}

After many, many hours of refactoring and improving, we’re very happy with the plugin and are using it on many of the custom sites we build for our clients. Check it out on the WordPress Plugin Repository and on Github and let us know if you find it useful.

-Mm

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.