CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The Huntsman
The Huntsman

Reputation: 31

Creating equal height columns with jQuery not working

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?

Upvotes: 0

Views: 92

Answers (2)

Modelcroissant
Modelcroissant

Reputation: 136

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

    });
}

Upvotes: 0

zgood
zgood

Reputation: 12571

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.

Upvotes: 1

Related Questions