It seems like a simple enough task, but it is one that has long frustrated web designers: creating a matrix of same sized elements, each (perhaps) containing a different amount of content, so that this array appears “even” and symmetrical.
With a goal of making a more robust equal heights plugin for jQuery that would easily make the height of all selected elements exactly even, developer Liam Brummitt set out to create matchHeight (www.brm.io/jquery-match-height/)
The matchHeight plugin’s features include being row aware, in order to handle floating elements, plus full responsiveness, so that it automatically updates on window resizing.
“I needed a more robust version of the common equal heights plugin (that everyone and their grandma has made before),” Brummitt explains. “So matchHeight improves on these by adding features and handling the edge cases where the others tend to fail in practice.”
The matchHeight plugin’s features include being row aware, in order to handle floating elements, plus full responsiveness, so that it automatically updates on window resizing. Additionally, matchHeight handles mixed padding, margin and border values (even if every element has different values).
Box-sizing and the handling of images and other media, which are updated automatically after the element loads, along with an API for handling data attributes, rounds out the plugin’s initial feature set.
Although the current version is an early v0.5.0., matchHeight has been fully tested in IE8+, Chrome, Firefox and Android it and it works well, but as with all new technologies, should be tested in your own developmental environment.
“Why not use CSS?” Brummitt asks rhetorically, explaining that “Making robust, responsive equal height columns for arbitrary content is difficult or impossible to do with CSS alone (at least without hacks or trickery, in a backwards compatible way).”
JavaScript based solutions are not without their problems however, so developers are advised to ensure that their layout remains usable even if JavaScript is disabled on the viewer’s browser.
Setting up matchHeight is simple, and first requires placing a standard jQuery call, along with the matchHeight script, either jquery.matchHeight.js or jquery.matchHeight-min.js, which are included in the page’s HTML file, like so:
<script src=”jquery.matchHeight.js”></script>.
Using matchHeight then requires a call in the DOM ready event: $(elements).matchHeight(byRow); — where the byRow option is a boolean switch that enables or disables automatic row detection, with the default setting being “true.”
A working example of the script is provided to help explain its functionality and implementation.
In its practical application, matchHeight allows users to employ the data attribute datamatchheight=”group-name” (or data-mh shorthand), where the group-name is an arbitrary string that denotes those elements that should be considered as a group.
The publisher notes that all elements that use the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required and with byRow optionally enabled when using the data API.
The matchHeight script offers several advanced options, internal properties and functions, such as $.fn.matchHeight._groups which calls an array containing all element groups that have had matchHeight applied.
The matchHeight plugin is available under The MIT License, with the source code over at GitHub.
