jQuery combine .ready and .resize

jquery resize ready
user825286 picture user825286 · Sep 13, 2011 · Viewed 47.4k times · Source

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!

Answer

Blazemonger picture Blazemonger · Sep 13, 2011 
$(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');

Related questions

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
How to resize images proportionally / keeping the aspect ratio?

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio. Can someone point me to some code, or explain the …

Read More
Using jQuery To Get Size of Viewport

How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin). For …

Read More