Question

I found the following jQuery, and it works great for a page that does not have dynamic content in a grid loading on the page as you click from tab to tab. One tabbed section of the grid, the default, will adjust the equal height correctly with the below jQuery, but when the user then clicks on one of the other tabs to load other content into the grid (in which the grid is a lot more content), the equal height jQuery does not adjust, which results in the content in the grid explaning beyond the footer or other content outside and below the grid.

Can someone please help me with the provided jQuery so that it will adjust the equal height dynamically?

Thank you!

$(document).ready(function () {
    $('.content').each(function () {
        var highestBox = 0;
        $('.equalcontentcolumn', this).each(function () {
            if ($(this).height() > highestBox)
                highestBox = $(this).height();
        });

        $('.equalcontentcolumn', this).height(highestBox);
    });
});

Answer 1

If you wrap the $('.content).each block in a function, you can then call the function to reapply the height equalising when you need to, such as when a tab is clicked, e.g.

$(document).ready(function () {

    function equaliseIt() {
        $('.content').each(function () {
            var highestBox = 0;
            $('.equalcontentcolumn', this).each(function () {
                if ($(this).height() > highestBox)
                    highestBox = $(this).height();
            });

            $('.equalcontentcolumn', this).height(highestBox);
        });
    }

    //call the function at page load
    equaliseIt();  
});

How are you changing the tab? Are you using a plugin or doing it manually?

If using a plugin, you might have access to a tabchange event or similar, which will be fired after the tab is changed, so you can use that to call the equaliseIt() function

If you’re changing the tabs manually, just call the function after changing the tab