reset height set by function on window resize

Question

I have a two column layout, where every block has a different height according to the content inside it. I wrote some jquery lines that take every pair of blocks, and apply the greater of both heights to both blocks, and it works fine, but I need it to resize on windows resize, and I'm stuck on how to do this.

I tried wrapping the function in a window.resize event but that didn't work at all. Once the page loads and the function runs one time, the heights don't change any more, so if I resize the window the content overflows.

The html code of the layout:

 <div class="catmenu cat61">
    <div class="row">
        <div class="col-md-6">
            <div class="row itemenu par">
              <p>content</p><p>content</p>
            </div>
            <hr class="hrp">
            <div class="row itemenu par">
               <p>content</p><p>content</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row itemenu impar">
              <p>longer</p><p>content</p><p>longer</p><p>content</p>
            </div>
            <hr class="hrp">
            <div class="row itemenu impar">
               <p>longer</p><p>content</p><p>longer</p><p>content</p>
            </div>
        </div>
    </div>
</div>

The jquery that does the trick on load:

 
var height1 = Math.max($( ".cat61 > div > div .row.itemenu.impar:nth-child(1)" ).height(), $( ".cat61 > div > div .row.itemenu.par:nth-child(1)" ).height());
 $(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height(height1);

I need the function to run on window.resize and update the heights according to the auto heights the blocks would render on resize, I'm guessing I need to somehow apply the auto height first and then run the jquery again but I don't know how to do this.

score 0 · Accepted Answer · answered Jun 06 '19 at 00:22

You had the right idea with using the window.resize event. I suspect that you were running into the problem that, once the height values are set on page load, subsequent .height() attempts will return that first derived height1 value.

Another issue might have been that you were caching height1 only on page load, so using it as-is (i.e. not recalculating it afresh) on resize will only ever set the heights to that first value.

If you create a method for your resizing that both clears any previously set height values and recalculates the "natural" heights of the elements, it should work to dynamically maintain the row heights the way you're expecting.

function reset_heights() {

  // CLEAR the last, programmatically set, height values (or they will never change)
  $(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height( '' );

  // THEN measure their "natural" heights
  var height1 = Math.max( $( ".cat61 > div > div .row.itemenu.impar:nth-child(1)" ).height(), $( ".cat61 > div > div .row.itemenu.par:nth-child(1)" ).height());

  // THEN set the newly derived max height
  $(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height( height1 ); 
}

// set your `resize` listener/handler
$( window ).on( 'resize', function ( event ) {
  reset_heights();
} );

// do your initial page-load resizing
reset_heights();

That said, resize fires a lot. So that resize event handler can be "expensive", processing-wise. I'd recommend that you leverage a bit of jQuery Object caching, and maybe consider debouncing.

reset height set by function on window resize

1 Answers1