CODEWITHSUNDEEP
javascriptjqueryhtml
Evi
Evi

Reputation: 39

Making elements the same height does not work on resize

I make my elements in the same height, everything works good (it works on page load), but it does not work on resize. Need your help

function same_height() {
         $('.front-section').children(".row").each(function() { 
          var maxHeight= -1;
          $(this).find(".owl-item").each(function() {
           maxHeight = maxHeight > $(this).height() ? maxHeight : 
            $(this).height();
          });
           $(this).find(".owl-item").each(function() {
             $(this).height(maxHeight);
         })
        });  
       }
     $(window).on('load',same_height);        

     $(window).on('resize',same_height);

Upvotes: 2

Views: 106

Answers (4)

Viktor
Viktor

Reputation: 101

May be your problem is from the HTML structure. Because your code is works like charm :) 

<div class="front-section">
  <div class="row">
    <div class="owl-item red">first row</div>
    <div class="owl-item green">first row</div>
    <div class="owl-item blue">first row</div>
  </div>
</div>

If the structure is okay, your script will do the following:

  • set every owl-item's height to a specific value
  • on a resizing event, you will query this value, what was set earlier

But what you really need:

  • set every owl-item's height to a specific value

  • on a resizing event, delete this height first (to set up content required auto height)

          $(this).css('height','auto')

  • and NOW query the height again

See the updated JSfiddle

https://jsfiddle.net/q4p79hw5/9/

Upvotes: 1

iMatoria
iMatoria

Reputation: 1448

Try this:

function same_height() {
    $('.front-section').children(".row").each(function() {
        var maxHeight = -1;
        $(this).find(".owl-item").each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight :
                $(this).height();
        });
        $(this).find(".owl-item").each(function() {
            $(this).height(maxHeight);
        })
    });
}
$(window).on('load resize', window.setTimeout(same_height, 1));

Upvotes: 1

garroad_ran
garroad_ran

Reputation: 174

This might be the cause of it. I would guess that the on('resize') method is only firing when you start to resize the screen, whereas you want it to fire when you finish resizing.

There's also some potentially very helpful answers in this thread.

Upvotes: 1

bene-we
bene-we

Reputation: 801

Try wrapping $(function() { ... your code ... } around your code to run the code when the page is loaded. Also try console.log("test") inside same_height() to check if the function runs at all

Upvotes: 2

Related Questions