JavaScript window resize event

Ian_Quigley_52458 0
Viewed 1161193
window-resize javascript
12 Answers

Best practice is to attach to the resize event.

window.addEventListener('resize', function(event) {
    ...
}, true);

jQuery is just wrapping the standard resize DOM event, eg.

window.onresize = function(event) {
    ...
};

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ, but I'd encourage you to test in Firefox, Safari, and IE.

olliej_7840

The following blog post may be useful to you: Fixing the window resize event in IE

It provides this code:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}
lakshmanaraj_445410

You can use following approach which is ok for small projects

<body onresize="yourHandler(event)">


function yourHandler(e) {
  console.log('Resized:', e.target.innerWidth)
}
<body onresize="yourHandler(event)">
  Content... (resize browser to see)
</body>

user_8600990
Related