DEMO: eqHeight.coffee

Markup

eqHeight.coffee works on a row container element with a group of similar column items.

<div class="row">
    <div class="column">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
    </div>
    <div class="column">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
    <div class="column">
        <p>Line 1</p>
    </div>
    <div class="column">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
    </div>
</div>

Before eqHeight.coffee

Columns align to contents and thus their heights are unequal.

Line 1

Line 2

Line 3

Line 4

Line 1

Line 2

Line 3

Line 4

Line 5

Line 1

Line 2

Line 3

After eqHeight.coffee

Columns are streched to equal heights. You can try resizing the window, and you'll find column heights being reset when columns got stacked up on smaller display.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="jquery.eqheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".row").eqHeight(".column");
});
</script>

Line 1

Line 2

Line 3

Line 4

Line 1

Line 2

Line 3

Line 4

Line 5

Line 1

Line 2

Line 3

Options

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, 5000, then the equalizing function is called every 5 seconds:

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

Try resizing the window, and see how the columns relayout after the 5-sec countdown.

Timer: 1

Line 1

Line 2

Line 3

Line 4

Line 1

Line 2

Line 3

Line 4

Line 5

Line 1

Line 2

Line 3