Understanding Jquery function - $(document).ready(callback);

Question

Hi am trying to run a function on window resize and document ready. As resize is triggered by mobile scroll it is necessary to check the height hasn't changed. This code works for resize but not on load. Is anyone able to explain whey the function isn't executed on document ready? Thanks in advance.

    //CLOSE EXPANDED ELEMENTS FOR MOBILE

var $window = $(window);
var width = $(window).width();


var callback = function () {



        if($(window).width() != width){

            if ($window.width() < 756) {
            $(".content_lower.collapse").removeClass('in');
          }
            else {
              $(".content_lower.collapse").addClass('in');
            }

        }

};

$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());

Answer 1

Actually on document ready the document is just loaded and the $(window).width() is equal to width variable.

So the function callback will be called while width = $(window).width() so it will not enter the if condition and nothing will happen inside the function.

If you try to log somtheing to the console or alert a message in the beginning of your function you will see that it's executed:

var callback = function() {
  console.log("Callback entered !!!");

  if ($(window).width() != width) {
    if ($window.width() < 756) {
      $(".content_lower.collapse").removeClass('in');
    } else {
      $(".content_lower.collapse").addClass('in');
    }
  }
};

EDIT:

If you still want to execute it in document load you can add a boolean flag initialized to false and set it to true if the window is once resized then test with it:

 var $window = $(window); var width = $(window).width(); var called = false; var callback = function() { console.log("callback entered !!!"); if ($(window).width() != width || !called) { if ($window.width() < 756) { $(".content_lower.collapse").removeClass('in'); } else { $(".content_lower.collapse").addClass('in'); } } called = true; }; $(document).ready(callback); $(window).resize(callback); console.log(callback.toString()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content_lower.collapse">the div</div> 

EDIT 2:

A better approach is to use the boolean flag as a parameter of the callback function, and call it with false on document load and true on window resize:

    var $window = $(window);
    var width = $(window).width();

    var callback = function(resized) {

      if ($(window).width() != width || !resized) {
        if ($window.width() < 756) {
          $(".content_lower.collapse").removeClass('in');
        } else {
          $(".content_lower.collapse").addClass('in');
        }
      }
    };

    $(document).ready(callback(false));
    $(window).resize(callback(true));

Answer 2

This gave the desired effect. Tanks for the help guys.

var $window = $(window);
var width = $(window).width();


var callback = function () {
  if ($window.width() < 756) {
  $(".content_lower.collapse").removeClass('in');
  }
  else {
    $(".content_lower.collapse").addClass('in');
  }
};

$(document).ready(callback);
$( window ).resize(function() {
  if($(window).width() != width){
    callback();
  }
});

Answer 3

When the document is loaded the width variable will be set to your window-width (let's say 500px). Then it checks if the current window-width (so 500px) is equal to the width var ( 500 !== 500 ). This returns false , so you code won't be executed. You can do this instead:

 var callback = function() { if ($(window).width() < 756) { $('body').text($(window).width() + " - if"); } else { $('body').text($(window).width() + " - else"); } }; $(document).ready(callback); $(window).resize(callback); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>