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!

Valet

Answer 1

$(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');

Trucker

And even simpler: $(window).resize(function() { //do whatever }).resize(); – Ahasuerus

@Kudla69 I always prefer writing .trigger('thing') instead of just .thing() in jQuery, just because I find it more clear as a reader. – Trucker

you freaken genius – Ultramontane

Is there a way to fire off multiple functions within $(document).ready(myfunction);? – Carmelocarmen

@Carmelocarmen Yes, create an anonymous function that calls them one by one. – Trucker

@Trucker that's exactly what I ended up doing, thank you :) – Carmelocarmen

Answer 2

One more better option

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

Do

load works differently from ready otherwise this would work. – Hereunto

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. api.jquery.com/ready – Colosseum

Answer 3

Something like this??

function mySetupFunction() {
    // stuff here.
}

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

Lilt

Answer 4

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
});

Develop