Resize function only works on page load

Question

I have the below Javascript that makes divs equal height. It works fine on initial pageload and sets the heights. But on resize it doesn't seem to fire. Any ideas why?

Here is a fiddle https://jsfiddle.net/caffeinehigh/ohrjLs7m/

$(window).resize(function() {

  var highestBox = 0;

      $('.casestudy-container .text').each(function(){

              if($(this).outerHeight() > highestBox) {
              highestBox = $(this).outerHeight();

      }
  });

  $('.casestudy-container .text').outerHeight(highestBox);

}).resize();

Possible duplicate of [jQuery resize event not firing](https://stackoverflow.com/questions/5683377/jquery-resize-event-not-firing) — Kalnode, Apr 11 '19 at 21:31

score 0 · Answer 1 · answered Apr 11 '19 at 21:30

I think you have an extra resize. The following seemed to work for me:

$(window).resize(function() {
  var highestBox = 0;
      $('.casestudy-container .text').each(function(){
        if($(this).outerHeight() > highestBox) {
          highestBox = $(this).outerHeight();
      }
  });

  $('.casestudy-container .text').outerHeight(highestBox);
});

Fiddle here: https://jsfiddle.net/pvsb9kr8/1/

Resize function only works on page load

1 Answers1