How to fire window.onresize event?

Question

I am trying to fire the resize event on window programmatically:

var evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', true, false);
window.dispatchEvent(evt);

That unfortunately does not work. I am trying to make ExtJS library to do recalculations, and it uses DOM Level 3 events so I cannot just call window.onresize();.

Answer 1

You are creating the wrong event.

Resize is a UIEvent, read the specs here

You need to do this:

var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

See it in action here: http://jsfiddle.net/9hsBA/

Answer 2

In case createEvent might get deprecated in favor of CustomEvent, here's a similar snippet using the CustomEvent API:

var ev = new CustomEvent('resize'); //instantiate the resize event
ev.initEvent('resize');

window.dispatchEvent(ev); // fire 'resize' event!