Combine onload and onresize (jQuery)

jquery resize window
eozzy picture eozzy · Dec 29, 2009 · Viewed 91.6k times · Source

I want to call the function on load as well as on resize.

Is there a better way to rewrite this more compactly?

$('.content .right').width($(window).width() - (480));
$(window).resize(function(e) {
    $('.content .right').width($(window).width() - (480));
});

Answer

Sampson picture Sampson · Dec 29, 2009

You can bind to the resize event alone, and trigger this event automatically upon load:

// Bind to the resize event of the window object
$(window).on("resize", function () {
    // Set .right's width to the window width minus 480 pixels
    $(".content .right").width( $(this).width() - 480 );
// Invoke the resize event immediately
}).resize();

The last .resize() call will run this code upon load.

Related questions

Resize Colorbox on window resize

Colorbox seems to be well suited "out of the box" for responsive design. I'm overriding the default dimension settings with percentages, and then setting maximum values so things don't get out of hand on huge screens: $.colorbox.settings.width = "92%"; $.colorbox.…

Read More
Trigger jQuery's $(window).resize only after $(window).load

I want something to happen when I resize my browser window, but every thing on the page must be loaded first. This doesn't work, but you get the picture: $(window).resize(function(){ $(window).load(function(){ // do stuff }); }); How can I …

Read More
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