Jquery .height() not updating on window resize-CodePudding

I am trying to put together a masonry style looking grid.

For it to work, I need all the grid items to match the height of the tallest (determined by how much content is in it).

Grid items that are double the height should be 2 x the tallest.

I have got it to work pretty well so far EXCEPT when I resize the window, the height does not re-calculate.

I have put together a codepen to illustrate here

https://codepen.io/shereewalker/pen/dymbgVq

I tried switching it to

$( window ).resize(function() {

But then it doesn't work until you re-size the window (I guess that's obvious), and then it only does it once.

How do I set the heights on load AND on resize?

Any help would be appreciated

$(document).ready(function() {
  // Select and loop the containers element of the elements you want to equalise
  $('.achievements-block').each(function() {
    // Cache the highest
    var min_highestBox = 0;
    // Select and loop the elements you want to equalise
    $('.grid-item.single', this).each(function() {
      // If this box is higher than the cached highest then store it
      if ($(this).height() > min_highestBox) {
        min_highestBox = $(this).height();
      }
    });

    // Set the height of all those children to whichever was highest 
    $('.grid-item.single', this).height(min_highestBox);
    $('.grid-item.double', this).height(min_highestBox * 2);


  });

});

.grid-item {
  position: relative;
  float: left;
}

.grid-item.double {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section >
  <div  style="width: 35%; background-color:red">

    <h2>Item 1 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 45%; background-color:blue">
    <h2>Item 2 - I am a large heading</h2>
    <p> I am some content, I actually have the most content. Way more than the others. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas
      sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.
      Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis,
      est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque
      nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id
      elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
      vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis
      in, egestas eget quam. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
      fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas
      eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  </div>


  <div  style="width: 20%; background-color:yellow">
    <h2>Item 3 - I am a large heading</h2>
    <p> I am some content</p>

  </div>


  <div  style="width: 40%; background-color:pink">
    <h2>Item 4 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 25%; background-color:orange">
    <h2>Item 5 - I am a large heading</h2>
    <p> I am some content</p>
  </div>



  <div  style="width: 35%; background-color:green">
    <h2>Item 6 - I am a large heading</h2>
    <p> I am some content and would like my box to be double the height of others for a masonry look.</p>
  </div>


  <div  style="width: 30%; background-color:purple">
    <h2>Item 6 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 35%; background-color:gray">
    <h2>Item 7 - I am a large heading</h2>
    <p> I am some content</p>
  </div>




</section>

CodePudding user response：

Put the code in the resize() event handler and trigger the resize event when the page loads.

$(document).ready(function() {
  $(window).resize(function() {
    // Select and loop the containers element of the elements you want to equalise
    $('.achievements-block').each(function() {
      // Cache the highest
      var min_highestBox = 0;
      // Select and loop the elements you want to equalise
      $('.grid-item.single', this).each(function() {
        // If this box is higher than the cached highest then store it
        if ($(this).height() > min_highestBox) {
          min_highestBox = $(this).height();
        }
      });
      console.log("Highest = ", min_highestBox);
      // Set the height of all those children to whichever was highest 
      $('.grid-item.single', this).height(min_highestBox);
      $('.grid-item.double', this).height(min_highestBox * 2);
    });
  }).resize(); // trigger the event when the page loads

});

.grid-item {
  position: relative;
  float: left;
}

.grid-item.double {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section >
  <div  style="width: 35%; background-color:red">

    <h2>Item 1 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 45%; background-color:blue">
    <h2>Item 2 - I am a large heading</h2>
    <p> I am some content, I actually have the most content. Way more than the others. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas
      sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.
      Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis,
      est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque
      nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id
      elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
      vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis
      in, egestas eget quam. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
      fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas
      eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  </div>


  <div  style="width: 20%; background-color:yellow">
    <h2>Item 3 - I am a large heading</h2>
    <p> I am some content</p>

  </div>


  <div  style="width: 40%; background-color:pink">
    <h2>Item 4 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 25%; background-color:orange">
    <h2>Item 5 - I am a large heading</h2>
    <p> I am some content</p>
  </div>



  <div  style="width: 35%; background-color:green">
    <h2>Item 6 - I am a large heading</h2>
    <p> I am some content and would like my box to be double the height of others for a masonry look.</p>
  </div>


  <div  style="width: 30%; background-color:purple">
    <h2>Item 6 - I am a large heading</h2>
    <p> I am some content</p>
  </div>


  <div  style="width: 35%; background-color:gray">
    <h2>Item 7 - I am a large heading</h2>
    <p> I am some content</p>
  </div>




</section>

CodePudding user response：

So in the end, I found a post on here almost identical to the issue I was facing.

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

(I initially couldn't find this)

I have changed my JS to

  function min_highestBox() {
  var tallest = 0;
  $('.grid-item').css('height','auto')
  $('.grid-item').each(function() {
    if ($(this).height() > tallest) {
      tallest = $(this).height();
    }
  });

  $('.grid-item.single').each(function() {
    $(this).height(tallest);
  });
  
   $('.grid-item.double').each(function() {
    $(this).height(tallest * 2);
  });
}
$(document).ready(function() {
  min_highestBox();
  $(window).on('resize', min_highestBox);
});

Which is now working as expected