Creating equal height columns with jQuery not working

Question

I'm using jQuery to make list items equal height (find the tallest, and make all list items equal to that).

But the code doesn't recognize any of the content within each column to set the height. It only recognizes an 8px border-top I have, and sets the height of each column to 8px. I need the code to recognize the content within the column (some h tags and p tags), find the tallest column, and make all columns equal to that.

$('#secondary').each(function(){  

        var highestBox = 0;
        $('.degreeCardInner', this).each(function(){

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  

        $('.degreeCardInner',this).height(highestBox);         

    });

See this example: JSFiddle

Click on a degree category to get to the screen I'm talking about. I'm trying to get each #degreeCardInner to register with a height that takes into account all the content within.

The code seems to work, but only recognizes the 8px border-top I have on the #degreeCardInner, and not the content within.

Is there something I need to add to the css to make this work?

Because you #secondary is set to display:none; when you are calculating your heights. Look at this Fiddle it calculates heights after #secondary is shown. — zgood
– zgood, Commented Jul 7, 2015 at 21:49
You should accept an answer if it helped you so it can help others in the future — zgood
– zgood, Commented Jul 8, 2015 at 19:48

zgood · Accepted Answer · 2015-07-07 22:09:01Z

It's because you are setting your heights on page load when #secondary is set to display:none; (no heights to calculate).

One possible solution might be to break your dynamic height code into its own function and just call it once the first time #secondary is shown.

Updated javascript:

$(document).ready(function(){

    ...
    $('#category li').on('click', function () {
            $('#main').addClass('hidden');
            $('#secondary').addClass('visible');
            if(!$('#secondary').data('heightSet'))
               setHeights();
        });
});

    function setHeights() {
        $('#secondary').each(function () {
            var highestBox = 0;
            $('.degreeCardInner', this).each(function () {
                if ($(this).height() > highestBox) highestBox = $(this).height();
            });
            $('.degreeCardInner', this).height(highestBox);
        });
        $('#secondary').data('heightSet', true);
    }

See this Fiddle for a demo.

Modelcroissant · Accepted Answer · 2015-07-07 23:05:14Z

It couldn't find the correct elements since they were hidden so here is a small adjustment to your code, Instead of running the function on load run it on click of the first function

$('#category').each(function () {

    var highestBox = 0;
    $('li', this).each(function () {

        if ($(this).height() > highestBox) highestBox = $(this).height();
    });

    $('li', this).height(highestBox);

}).click(function () {
    onShow();
});

function onShow() {
    $('#secondary').each(function () {

        var highestBox = 0;
        $('.degreeCardInner', this).each(function () {

            if ($(this).height() > highestBox) highestBox = $(this).height();
        });

        $('.degreeCardInner', this).height(highestBox);

    });
}

Collectives™ on Stack Overflow

Creating equal height columns with jQuery not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related