Combine onload and onresize (jQuery)
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));
});
Solution 1:
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:
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:
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:
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:
Simple way:
html:
<body onload="$(window).resize()">
javascript:
$(window).resize(function () {
...
});