jQuery combine .ready and .resize

Question

Some (well, nearly all) of my code that is in my jQuery .ready function also applies when the window is resized, as it's layout work. However, since it's the same code, how could I "combine" the two functions, so that my code doesn't repeat itself (and be a mess to maintain)?

Thanks!

Blazemonger · Accepted Answer · 2013-12-06T15:57:06.953

61

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    // do whatever
}

Another technique is to .trigger() one event inside the other:

$(window).on('resize',function() {
    // do whatever
});
$(document).ready(function() {
    $(window).trigger('resize');
});

If you put your code at the bottom of the page to avoid needing $(document).ready, it gets even simpler:

$(window).on('resize',function() {
    // do whatever
}).trigger('resize');

edited Dec 06 '13 at 15:57

answered Sep 13 '11 at 16:05

Blazemonger

90,923
26
142
180

1

And even simpler: $(window).resize(function() { //do whatever }).resize(); – Jamie Kudla Jul 18 '14 at 14:54
3

@Kudla69 I always prefer writing `.trigger('thing')` instead of just `.thing()` in jQuery, just because I find it more clear as a reader. – Blazemonger Jul 18 '14 at 15:01
you freaken genius – Jul 06 '17 at 12:12
Is there a way to fire off multiple functions within `$(document).ready(myfunction);`? – stinkysGTI Nov 15 '18 at 20:18
@stinkysGTI Yes, create an anonymous function that calls them one by one. – Blazemonger Nov 16 '18 at 19:33
@Blazemonger that's exactly what I ended up doing, thank you :) – stinkysGTI Nov 19 '18 at 17:19

score 13 · Answer 2 · answered Aug 07 '15 at 20:27

13

One more better option

$(window).on("load resize",function(e){
  function abc() {
    // code here
  }
});

answered Aug 07 '15 at 20:27

karan mehta

139
1
2

1

`load` works differently from `ready` otherwise this would work. – UXCODA Jan 23 '19 at 21:39
Just for clarification on UXCODA's comment: `load` and `resize` are callback jQuery wrappers for the `window` DOM object's `onload` and `onresize` callbacks (respectively). `ready` is a jQuery callback that tracks the DOMContentLoaded event. `ready` would allow for manipulation as soon as the DOM is ready, while `window.onload` is much later in the lifecycle. If anything is put in this handler that is time-intensive, it will cause the DOM to flicker. https://api.jquery.com/ready/ – Blake Neal Aug 20 '19 at 18:24

score 8 · Answer 3 · answered Sep 13 '11 at 16:05

8

Something like this??

function mySetupFunction() {
    // stuff here.
}

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

answered Sep 13 '11 at 16:05

mellamokb

56,094
12
110
136

caot · Answer 4 · 2021-06-11T18:56:33.160

The following code might be helpful to do things after resize is ready.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here after resizing has done
            
  }, 250);

});

Here is the issue with the following that the code is running while resize is under going.

$(window).on('resize', function(e) {
  // Run code here while resizing is under going
});

jQuery combine .ready and .resize

4 Answers4

Linked

Related