$(document).ready() & $(function(){}

Question

I have two functions:

function func1(){}

and

function func2(){}

both of these functions requires the following to work

$(document).ready();
$(window).resize();

so I have implemented it to both the functions as follows:

$(document).ready(func1);
$(window).resize(func1);

and

$(document).ready(func2);
$(window).resize(func2);

The problem? there is two;

1) I already have $(function(){ wrapping the above two functions, but I still need need $(document).ready(); why? isn't both the same thing?!

2) I am trying to short-cut the code and only have $(document).ready(); "if needed" and $(window).resize(); to appear once and then add functions to it, and not add it to functions. Confused? okay...

so I basically want to do this:

$(document).ready(func1,func2);
$(window).resize(func1,func2);

But it didn't work, any ideas?

My script:

$(function(){

   //Prevent clicking on .active & disabled links
   'use strict'; $('.active, disabled').click(function(e) {
      e.preventDefault();
   });

   //Off-canvas menu
   var $pages = $('#page, #secondHeader'),
       $header = $('#header'),
       $secondHeader = $('#secondHeader .menu-button');

   $secondHeader.on('touchstart click', function(e) {
      e.preventDefault();
      $pages.toggleClass("pageOpen");
      $header.toggleClass("headerOpen");
      $(this).toggleClass("menu-button-active");
   });

   $('#page').on('touchstart click', function() {
      $pages.removeClass("pageOpen");
      $header.removeClass('headerOpen');
      $secondHeader.removeClass("menu-button-active");
   });

   //Grid system
   var gridElement = $(".gridElement", "#grid3");
   (function() {
      $(document).ready(GalleryGrid);
      $(window).resize(GalleryGrid);
   })(jQuery);

   function GalleryGrid() {
      var grid3 = $('#grid3');
      var width = $(window).width();
      if (width < 1024 && width > 770) {
         var grid1 = $('#grid1');
         var grid2 = $('#grid2');

         for (var i = 0; i < gridElement.length; i++) {
            if (i < gridElement.length / 2) {
               grid1.append(gridElement[i]);
            } else {
               grid2.append(gridElement[i]);
            }
         }
      } else {
         grid3.append(gridElement);
      }
   }


   $(document).ready(fullScreen);
   $(window).resize(fullScreen);
   function fullScreen() {
       var newHeight = $("html").height() - $("#header").height() + "px";
       $(".fullscreen").css("height", newHeight);
   }

});

Answer 1

Use a wrapper function to call both functions on the same event:

function go(){
    func1(); // Call function 1 and 2.
    func2();
}

$(document).ready(go);
$(window).resize(go);

Or, to make absolutely sure the document is ready, you can even attach the resize event listener after the ready event:

$(document).ready(function(){
    $(window).resize(go);
});

Answer 2

Do like this.

 function fullScreen() {
      var newHeight = $("html").height() - $("#header").height() + "px";
      $(".fullscreen").css("height", newHeight);
    }
    fullScreen();
   GalleryGrid();
   $(window).resize(function(){
        fullScreen();
        GalleryGrid();
    });

Just call the function like fullScreen() no need to use $(document).ready.

For Gallery Grid

Remove from you code. No need to call (function(){}) twice.

(function() {
      $(document).ready(GalleryGrid);
      $(window).resize(GalleryGrid);
   })(jQuery);

Answer 3

I'd suggest using an anonymous function to get this done.

For example:

$(document).ready(function() {
    1();
    2();
});

That should be a good starting point.

Answer 4

(function(){ ... })();

It is not equivalent to document.ready. Here it is not necessary DOM is ready. It is anonymous function it invoke itself as soon as possible when the browser is interpreting your ecma-/javascript.

Better and suggested to use document.ready():

$(document).ready(function(){
fullScreen();

//other code

});

Answer 5

Don't

Don't call $(document).ready() inside $(document).ready() , it doesn't make sense. The code inside of $(document).ready(/* the code here */) is not executed immediately. It is scheduled for execution sometime later (when the document is ready).

Calling

$(document).ready(function() {
    //do this
    $(document).ready(some_function)
    //do that
});

Is like saying "wait until the document is ready, do this, wait until the document is ready to do some_function, do that."

Document ready event:

$(function(){})

Is just a shortcut/shorthand for:

$(document).ready(function(){})

ready is an event. It belongs to the document object and it is triggered when the document is ready.

To register two functions to be called when the document is ready just do either:

$(document).ready(function() {
    func1();
    func2();
});

Or

$(function() {
    func1();
    func2();
});

Or

function func3() {
    func1();
    func2();
}
$(document).ready(func3);

Or

function func3() {
    func1();
    func2();
}
$(func3);

Window resize event:

resize is an event. It belongs to the window object and it is triggered when the window is resized.

To register two functions to be called when the window is resized just do:

$(window).resize(function() {
    func1();
    func2();
});

Or

function func3() {
    func1();
    func2();
}
$(window).resize(func3);