Trouble Shooting Event on Resize Not Firing

Question

I am using the technique at this link to equalize the height of bootstrap carousel slides, so in the case of an uneven amount of text the slides do not cause the elements below them to bump up and down when advancing slides:

https://snook.ca/archives/javascript/normalize-bootstrap-carousel-heights

function normalizeSlideHeights() {
  $('.carousel').each(function() {
    var items = $('.carousel-item', this);
    items.css('min-height', 0);
    var maxHeight = Math.max.apply(null, items.map(function() {
      return $(this).outerHeight()
    }).get());
    items.css('min-height', maxHeight + 'px');
  })
}

$(window).on('load resize orientationchange', normalizeSlideHeights);

The first part of the code works great, all my carousel slides are the same height. The second part where it is looking for changes to the window size to re-adjust the slide height doesn't seem to work at all. I tried editing the original code to just check for 'resize' to simplify it but did not see any difference.

Any insights or ideas to a solution are greatly appreciated, thank you!

Answer 1

Try plain JavaScript. If something in jQuery isn't working for me, I always try plain JavaScript. An example is below:

window.onresize = function(){normalizeSlideHeights()}
window.onload = function(){normalizeSlideHeights()}

This WILL trigger the normalizeSlideHeights() function on resize and load, if the function exists. If this does not work correctly, then the issue is with the function itself.
You could also put some consoleLog() commands to see wether the function actually fires at all on resize.

I know this is not jQuery, but it's almost as short and easy to write. I hope my answer helps you. I do not know for sure that this is the issue.