2

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);
Evi
  • 39
  • 4
  • It's not clear what you're asking, or what the issue is. Could you give a clearer explanation of what you're trying to do – Rory McCrossan Aug 14 '17 at 12:46
  • $(window).on('resize',same_height); this does not work – Evi Aug 14 '17 at 12:48
  • Is it calling the same_height method on resize at all? – Bas Slagter Aug 14 '17 at 12:50
  • On resize it is stay the same – Evi Aug 14 '17 at 12:51
  • Are you trying to cater for content wrapping on resize? By that time, you've set fixed height on all your elements, so it won't change. Look at other options for setting the same height across multiple elements, e.g. CSS flexbox. – DarthJDG Aug 14 '17 at 12:53
  • elements in different place, I can not use css – Evi Aug 14 '17 at 12:56
  • FYI: You can optimize your code by `$(window).on('load resize',same_height);`. – iMatoria Aug 14 '17 at 12:56
  • You can achieve same height elements using css only - [have a look at flexbox](https://codepen.io/imohkay/pen/gpard) – Pete Aug 14 '17 at 12:57
  • The code looks fine to me. But I guess since it looks like you are trying to do this for owl carousel, you might need to refresh owl-carousel . Please try this $('.owl-carousel').trigger('refresh.owl.carousel'); after you adjust your height for the carousel – Kiran Dash Aug 14 '17 at 13:00
  • Can you set up a test case in either a snippet/JSFiddle so that we can see what the issue is? All answers are random shots in the dark without having any information about what is actually happening. The problem is probably not with the code that you've posted, but what you're trying to achieve and how. – DarthJDG Aug 14 '17 at 13:01

4 Answers4

2

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

bene-we
  • 603
  • 9
  • 17
  • like this ? $(function() { $(window).on('load',same_height); $(window).on('resize',same_height); }); or full code? – Evi Aug 14 '17 at 12:54
  • yes, try it. Does the function fire on page load? If so check @garroad_ran's answer down below – bene-we Aug 14 '17 at 13:01
  • okay write `console.log("test")` inside your `same_height` function and check if its written in your console – bene-we Aug 14 '17 at 13:06
  • It works , but only on resize start, When I begin to resize it change height and stay the same. – Evi Aug 14 '17 at 13:28
1

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.

garroad_ran
  • 154
  • 1
  • 10
  • No, resize event will fire with every 1px change. But, browsers optimize it with not firing it for every pixel but with speed of resize as well. So, its always better to use `window.setTimeout` for resize or scroll events. – iMatoria Aug 14 '17 at 13:20
  • Well, there you go! Shows what I know. – garroad_ran Aug 14 '17 at 13:22
1

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));
iMatoria
  • 1,410
  • 2
  • 19
  • 35
  • 1
    @Evi: In that case it definitely has some dependency with the plugin that you are using. Try reading through the plugin options and methods. Most likely you will find some `refresh` function which will do the trick. – iMatoria Aug 14 '17 at 13:16
  • I tried this code without owl-carousel, it is the same. It works , but only on resize start, When I begin to resize window it change height and stay the same. – Evi Aug 14 '17 at 13:35
  • 1
    @Evi: In that case check CSS for your `.font-section`, `.row` etc parent containers. Something else is restricting it. – iMatoria Aug 14 '17 at 13:40
1

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/

Viktor
  • 101
  • 4