Combine onload and onresize (jQuery)

Question

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

Sampson · Accepted Answer · 2013-04-11T01:39:30.760

124

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.

edited Apr 11 '13 at 01:39

answered Dec 29 '09 at 14:07

Sampson

265,109
74
539
565

1

`$(window).on('resize', function(){}).trigger('resize');` – kzh Apr 17 '13 at 12:30
1

@kzh Did you have problems with `.resize`? This is standard use of the method, as [the documentation states](http://api.jquery.com/resize/): *Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.* – Sampson Apr 17 '13 at 13:03
@JonathanSampson Nope. No problem. Just showing the newer syntax. – kzh Apr 18 '13 at 13:23
@kzh `.trigger` and `.resize` are both from jQuery 1.0. – Sampson Apr 18 '13 at 14:02
how come .resize() will call it on load? – Claudiu Creanga Jun 12 '15 at 10:59
2

You sir, deserve a cookie. – Gokhan Sari Jan 02 '17 at 19:14
@Sampson, what's the logic? – borayeris Jun 20 '17 at 21:46

score 78 · Answer 2 · answered Jul 13 '14 at 10:36

78

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

answered Jul 13 '14 at 10:36

Hativ

1,500
1
16
24

9

I agree. It's the cleanest way to go. – Alex Ishida Dec 27 '14 at 03:06

Emil Vikström · Answer 3 · 2012-10-18T19:49:24.493

18

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

edited Oct 18 '12 at 19:49

answered Dec 29 '09 at 14:08

Emil Vikström

90,431
16
141
175

Thanks, this will work for both when DOM is ready and when Window is resized. – Wasim Shaikh Sep 12 '13 at 13:47

score 4 · Answer 4 · answered Oct 29 '12 at 22:48

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.

answered Oct 29 '12 at 22:48

David J.

31,569
22
122
174

This was the only way i could get it working for a script I was using. – Nick W. Jul 26 '17 at 18:59

score 2 · Answer 5 · answered Sep 05 '16 at 21:30

2

Simple way:

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

javascript:
$(window).resize(function () { 
...
});

answered Sep 05 '16 at 21:30

mmg

21
1

Combine onload and onresize (jQuery)

5 Answers5

Linked