CODEWITHSUNDEEP
htmljqueryresponsive-design
Ramil
Ramil

Reputation: 91

Responsive jQuery Equal Height Per Pair

I have this markup:

<div class="wrapper">
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
    <article>G</article>
    <article>H</article>
</div>

which is floated and forms a two-column list. Each article has a variable height due to its contents.

What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?

Note: Can't change the article markup because it's outputted by the CMS.

My expected output:

|-------|---------|
|   A   |    B    |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|       |         |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|

Upvotes: 0

Views: 1119

Answers (4)

Ramil
Ramil

Reputation: 91

I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/

Upvotes: 0

Orbling
Orbling

Reputation: 20612

Here is a little bit of code that will set the height to the max height, splitting a block of articles by a column count, rather than any other structural method.

Demo: http://jsfiddle.net/bgWaw/

var articles = $('.wrapper article');

var columns = 2;

var cIndex = 0;
while (cIndex < articles.size()) {
    var cMaxHeight = 0;
    for (cColumn = 0; cColumn < columns; cColumn++) {
        var cArticle = articles.eq(cIndex + cColumn);
        if (cArticle.size() > 0) {
            cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
        }
    }

    articles.slice(cIndex, cIndex + columns).height(cMaxHeight);

    cIndex += columns;
}

This could easily be turned in to a plugin if needed. Just a matter of making it a function in the $.fn object and using this rather than articles and passing in columns as a parameter to the function.

jQuery Plugin Version Demo: http://jsfiddle.net/bgWaw/2/

$.fn.maxSliceHeight = function(columns) {
    var cIndex = 0;
    while (cIndex < this.size()) {
        var cMaxHeight = 0;
        for (cColumn = 0; cColumn < columns; cColumn++) {
            var cElem = this.eq(cIndex + cColumn);
            if (cElem.size() > 0) {
                cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
            }
        }

        this.slice(cIndex, cIndex + columns).height(cMaxHeight);

        cIndex += columns;
    }

    return this;
}

Example call:

$('.wrapper article').maxSliceHeight(2);

Upvotes: 2

user1359537
user1359537

Reputation: 26

Separating by divs is a good solution if you really want always two columns, but I assume that you might want to change to three columns if the browser is wide enough. Have you looked at isotope? http://isotope.metafizzy.co/

Upvotes: 0

Thomas Clayson
Thomas Clayson

Reputation: 29935

Contrary to my comment here is another method you can use:

Turn that markup into rows:

<div class="row">
    <article>A</article>
    <article>B</article>
</div>
<div class="row">
    <article>C</article>
    <article>D</article>
</div>
<div class="row">
    <article>E</article>
    <article>F</article>
</div>

Float the <article> elements again, but make sure each .row div has clear: both in the CSS.

That way every "row" will be the same height has the tallest content within it.

Upvotes: 1

Related Questions