jQuery function executes on $(window).resize() or $(document).ready() not both

Question

I have written a function to resize some <div>s. The function works on either $(document).ready() or $(window).resize() but not both. So, either I have to refresh the browser when I change the window size to change the div height or I have to change the window size and then the function will execute and the divs will become equal height.

My code looks like this:

function findTallest() {
  var tallestBlock = 0;
  $('.homepageIntroBlocks').each(function() {
    if ($(this).height() > tallestBlock) {
      tallestBlock = $(this).height();
    }
  });

  $('.homepageIntroBlocks').each(function() {
    $(this).height(tallestBlock);
  });
}
$(document).ready(function() {
  findTallest();
  $(window).on('resize', findTallest);
});

.homepageIntroBlocks {
  background-color: green;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <section class="col_3 homepageIntroBlocks" id="notANumberBlock" data-thisBlockText="notANumberBlockText">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="toHelpYouBlock" data-thisBlockText="toHelpYouBlockText">
    <h3>We're here<br /> to help you...</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="whoMadeItBlock" data-thisBlockText="whoMadeItBlockText">
    <h3>We're the people<br /> who made it...</h3>
  </section>
  <section class="col_3 homepageIntroBlocks" id="itsYourEventBlock" data-thisBlockText="itsYourEventBlockText">
    <h3>It's your event,<br /> on us...</h3>
  </section>
</div>

I have tried this solution, but it has the same problem. I have also tried:

$(window).on('resize', findTallest).trigger('resize');

$(window).on('resize', findTallest).bind('load');

$(window).on('resize load', findTallest);

$(window).load(findTallest);

$(window).resize(findTallest)

$(window).on('load', findTallest).trigger('resize');

But none of them have worked. I have also tried moving the $(window).resize() outside of $(document).ready() but it had no effect.

It looks like it is working in the snippet, but that is because it is being executed when the document loads. If you look at this jsfiddle you can see that it works on load, but if you resize the page then you have to run the snippet again to make the divs resize. You can also see that if you comment out findTallest() like I did in this other jsfiddle then when the document loads the divs are different heights, but if you resize the browser then the function executes and the divs become equal height and then if you refresh the heights reset and they are different heights again.

I am also having the same problem with a different function that I wrote to make a footer at the bottom of a page. I appreciate everyone's help, please let me know if you need more info.

check this [codepen](http://codepen.io/micahgodbolt/pen/FgqLc) by Micah Godbolt it will help you — Vitorino fernandes, Dec 30 '15 at 19:15
@A.Wolff You're right the css code I used confused things. I added some lorem ipsum and got rid of the height to better illustrate the issue. — CascadiaJS, Dec 30 '15 at 19:28

score 2 · Accepted Answer · answered Dec 30 '15 at 19:34

Once you have set the height using .height(tallestBlock) the heights are all the same. Add $('.homepageIntroBlocks').css('height','auto') in the beginning of your function to reset the heights.

function findTallest() {
  var tallestBlock = 0;
  $('.homepageIntroBlocks').css('height','auto')
  $('.homepageIntroBlocks').each(function() {
    if ($(this).height() > tallestBlock) {
      tallestBlock = $(this).height();
    }
  });

  $('.homepageIntroBlocks').each(function() {
    $(this).height(tallestBlock);
  });
}
$(document).ready(function() {
  findTallest();
  $(window).on('resize', findTallest);
});

https://jsfiddle.net/SeanWessell/9L1zxs8f/

Wessel, Thanks so much, I've been struggling with this for a week! This totally fixed my problem and even showed me how to fix my stickyFooter function too! — CascadiaJS, Dec 30 '15 at 20:42

jQuery function executes on $(window).resize() or $(document).ready() not both

1 Answers1

Linked