There is a template with 4 columns that should be the same height. To solve this problem, I use the function:

$(document).ready(function() { function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if (currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } setEqualHeight($(".EqualHeights")); });

When you load the page, everything is fine, but when you change the width of the browser window, the text starts falling out of the columns, as if this function does not exist. When reloading the page, everything works fine again. Tell me how to prevent text from falling out of columns when changing the width of the browser window.

  • add an event handler when the window is resized: $(window).resize - lexxl
  • one
    what's the problem to use flex ??? Why these unnecessary js crutches? - Vasily Barbashev
  • @ Vasily Barbashev problem, usually in ignorance. - Regent
  • @Regent doom. It was necessary to put the question differently, to ask what are the approaches to the solution. codepen.io/bustexz/pen/akGGVW?editors=1100 - Vasily Barbashev

1 answer 1

You also need to hang the .resize () event handler on the window and call your function inside.

 function setEqualHeight(columns) { ... } $(document).ready(function() { ... setEqualHeight($(".EqualHeights")); ... }); $(window).resize(function() { ... setEqualHeight($(".EqualHeights")); ... });

Read more about .resize () here. https://api.jquery.com/resize/