CODEWITHSUNDEEP
javascriptdom
Tower
Tower

Reputation: 102755

How to fire window.onresize event?

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

Upvotes: 9

Views: 17656

Answers (3)

yuvilio
yuvilio

Reputation: 4175

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!

Upvotes: 4

PilotGuru
PilotGuru

Reputation: 51

Just in case anyone else needs this, in Extjs 4.1 you can do something typically inelegant...

    Ext.ComponentQuery.query('viewport')[0].doLayout();

No need for an id on the viewport - the .query('viewport') part is using the viewport's alias config.

Upvotes: 3

Martin Jespersen
Martin Jespersen

Reputation: 26183

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/

Upvotes: 28

Related Questions