eqHeight.coffee

eqHeight.coffee is a jQuery plugin that stretches fluid columns to equal height. It is originally designed to be used in responsive web design. A live demo is available.

With eqHeight applied, floating columns in the same row container are always stretched to the height of the tallest one. For better visual experience on mobile devices, eqHeight adjusts column heights as window resizes. Furthurmore, eqHeight resets columns to their default height values when columns are stacked together on small displays.

eqHeight currently supports Twitter Bootstrap and Responsive GS. Supports for more responsive design grid systems to be added.

Find us on our Github Repository & Github Pages.

How to Use

Download eqHeight

Download jquery.eqheight.js from Github or jQuery Plugins Registry.

You can install via Bower as well:

bower install eqheight-coffee

Put eqHeight in your page

Please note that you have to include eqHeight after jQuery.

<script src="http://code.jquery.com/jquery.min.js"></script>

<!-- put eqHeight after jQuery -->
<script src="jquery.eqheight.js"></script>

Use eqHeight in your page

Using eqHeight is simple. You have to specify a CSS3 selector for row containers, and optionally a CSS3 selector for columns inside those row containers. eqHeight selects the top level children of row containers as columns by default.

Say your HTML looks like this:

<div class="row" style="display: block; clear: both;">
    <div class="column" style="display: block; float: left; width: 200px;">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
    </div>
    <div class="column" style="display: block; float: left; width: 200px;">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
    <div class="column" style="display: block; float: left; width: 200px;">
        <p>Line 1</p>
    </div>
    <div class="column" style="display: block; float: left; width: 200px;">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
    </div>
</div>

A simple eqHeight setup for the above HTML would be:

<script type="text/javascript">
$(document).ready(function() {
    $(".row").eqHeight(".column");
});
</script>

You can also use

$(".row").eqHeight();

in this case because <div class="column"> elements are top level children of <div class="row"> elements.

Options

equalize_interval

By default, the equalizing function is called only on window resize. You can change this default behavior by setting the equalize_interval option. If equalize_interval is specified with a number value, for example, 500, then the equalizing function is called every 500ms:

/* call the equalizing function every 500ms*/
$(".row").eqHeight(".column", {
    equalize_interval: 500
});

break_point

You can set minimum width under which the plug-in will be ignored with the break_point option.

This is useful for responsive designs, in which floating element should be the same height side by side, but for smaller screens the elements are stacked and should have auto height.

/* do not call the equalizing function when display width is under 568px*/
$(".row").eqHeight(".column", {
    break_point: 568
});

Use with existing responsive grid systems

You can use eqHeight with existing responsive grid systems that have similar structures. We'll demonstrate some of them here.

Twitter Bootstrap

If you're using Twitter Bootstrap, the idea is the same:

<!-- include Bootstrap javascript files first -->
<div class="row">
    <div class="span3">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
    </div>
    <div class="span4">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
    <div class="span5">
        <p>Line 1</p>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $(".row, .row-fluid").eqHeight(".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12");
});
</script>

Responsive GS

A sample for using Responsive GS with eqHeight.coffee:

<!-- include Responsive GS files here -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<div class="row">
  <div class="col span_3">
      <p>1-1</p>
      <p>1-2</p>
      <p>1-3</p>
      <p>1-4</p>
  </div>
  <div class="col span_4">
      <p>2-1</p>
      <p>2-2</p>
      <p>2-3</p>
      <p>2-4</p>
      <p>2-5</p>
  </div>
  <div class="col span_5">
      <p>3-1</p>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $(".row").eqHeight(".col");
});
</script>

Responsive-SASS-Grid

A live demo using carlopogus/Responsive-SASS-Grid with eqHeight.coffee can be found here. See issue #2 for more details.

Any Comments?

If you have any comments, or you found any bugs to report, please post them in Issues.

Developing eqHeight.coffee

eqHeight.coffee is written in CoffeeScript.

If you're contributing to eqHeight.coffee, make sure to modify jquery.eqheight.coffee, not jquery.eqheight.js.

License

Copyright (c) 2013-2014, Jui-Shan Liang <[email protected]>

All rights reserved.

Licensed under GPL v2.