JS code doesn't act the same when inside a function, and invoked

Question

Example code: Html:

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

The css:

*{
  margin: 0;
  padding: 0;
}

.wrap{
  width: 30%;
  height: 200px;
  background: #f7f7f7;
  float: left;
}

.wrap:not(:first-child){
  margin-left: 5%;
}

.item{
  width: 100%;
  height: 47px;
  margin-bottom: 3px;
  background: #999;
}

The js code that works:

(function($){
          $('.wrap').each(function(){
            var thisWrap = $(this),
            naturalHeight = thisWrap[0].scrollHeight,
            restrictedHeight = thisWrap[0].clientHeight;
            if (naturalHeight - 5 > restrictedHeight){
              thisWrap.css({'background': 'red'});
            }
          });



})(jQuery);

The js code that doesn't:

(function($){

    function myCustomFunction(){
          $('.wrap').each(function(){
            var thisWrap = $(this),
            naturalHeight = thisWrap[0].scrollHeight,
            restrictedHeight = thisWrap[0].clientHeight;
            if (naturalHeight - 5 > restrictedHeight){
              thisWrap.css({'background': 'red'});
            }
          });
    }

    $(window).resize(function(){
      myCustomFunction();
    });

    myCustomFunction();

})(jQuery);

In this codepen example both work, but on my test page when the code is in a function and invoked after the definition of the function it doesn't work. The wrap element is already on the page when the js loads, the js code detects for overflow, that css is defined in a file that gets loaded on line 39, the js gets loaded on line 1300+. Putting all in a document ready function doesn't help.

How can this code in the same file work properly when not in a function?

EDIT: The issue seems to be with the window resize function, it seems that something is triggering that while the page loads.

Could be that `mycustomelement` doesn't exist yet, so no iterations run? Can you make a [MCVE]? — CertainPerformance, Jun 20 '18 at 08:03
I made this [codepen](https://codepen.io/danield88/pen/xzYJgr) which revolves around the same idea, but it works just like expected. The thing that I don't understand is: you mentioned that `mycustomelement` might not exist, It exist, it just might not be overflown, which is what the code looks for. But how come that the code works, when outside of the function, same place same file? — D. Dan, Jun 20 '18 at 08:29
Because https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — CertainPerformance, Jun 20 '18 at 08:31
It was caused by another function that caused heights to be returned 0. — D. Dan, Jun 20 '18 at 12:20

score 0 · Answer 1 · answered Jun 20 '18 at 12:17

0

This issue was caused by another script which was putting display: none; styling on the wrap-s(so the problem was it fired too late). I solved it by adding a setTimeout with 400ms on the tab change click, and including the function there.

answered Jun 20 '18 at 12:17

D. Dan

179
6

score -1 · Answer 2 · answered Jun 20 '18 at 08:07

-1

To fix your problem use this

$(window).on('resize', function(){
  myCustomFunction();
});

answered Jun 20 '18 at 08:07

Jimmy Grande

47
2

`$(..).resize(handler)` is an alias for `$(..).on('resize', handler)`, switching one out for another should make no difference – CertainPerformance Jun 20 '18 at 08:10

JS code doesn't act the same when inside a function, and invoked

2 Answers2