Combine onload and onresize (jQuery)

JqueryResizeWindow

Jquery Problem Overview

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

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

I think the best solution is just to bind it also to the load event:

$(window).on('load resize', function () {
    $('.content .right').width( $(this).width() - 480 );
});

Solution 3 - Jquery

It is nice to spot repeating logic and break that out to a function instead:

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

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

Solution 4 - Jquery

I'm going to combine the best parts of two other answers. First, move repeated code into a function. Second, don't pollute the global namespace.

$(document).ready(function() {
  var adjust_size = function() {
    $('.content .right').width($(window).width() - 480);
  };
  adjust_size();
  $(window).resize(adjust_size);
});

I named the function adjust_size because I prefer verbs for action-oriented functions.

Solution 5 - Jquery

Simple way:

html:
<body onload="$(window).resize()"> 

javascript:
$(window).resize(function () { 
...
});
Categories
Recommended Jquery Solutions
Recommended Resize Solutions
Recommended Window Solutions

Previous Solution:

RSpec: specifying multiple calls to a method with different argument each time

RubyTestingRspec

Next Solution:

How to hide cursor in a Swing application?

JavaSwingMouse Cursor

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioneozzyView Question on Stackoverflow
Solution 1 - JquerySampsonView Answer on Stackoverflow
Solution 2 - JqueryHativView Answer on Stackoverflow
Solution 3 - JqueryEmil VikströmView Answer on Stackoverflow
Solution 4 - JqueryDavid J.View Answer on Stackoverflow
Solution 5 - JquerymmgView Answer on Stackoverflow