Home > Features > Dev Depot: MatchHeight, Make the Height of all Selected Elements Equal • Bookmark   • Newsletters   • Register Search Options


Dev Depot: MatchHeight, Make the Height of all Selected Elements Equal

Dev Depot: MatchHeight, Make the Height of all Selected Elements Equal

July 24, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 140 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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/)

“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.


See Bigger Picture, Participate and Stand United

Anyone who’s worked in the adult industry in the past five years knows the challenges we’ve faced. Some people have even questioned staying in the business. After all, between cheap content,... More »

Developing, Launching New Products

Last fall I discovered that voice-to-text had finally become useful on my mobile. It was 85 to 90 percent accurate in a quiet room. It felt like magic. Since then, my morning walk to work in Barcelona... More »

Tips to Improve Your Marketing Game

Back in the day, affiliates and traffic would virtually fall in your lap — and yes, the pun is intentional. You built a site, threw up some banners and, somehow, made money. Today, with the influx... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.



Oct 05 - Oct 07
Hannover, Germany


Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!