DOM event fired by window resize

Question

I have a page that has a fairly complicated layout. When the page is initially opened there's a problem with the aligment of some of the elements. However, this problem can be resolved (permanently) by changing the size of the brower window.

Obviously I don't want the user to have to resize the browser window in order for the page to display correctly, so I'm wondering if there's a way I can programatically trigger the handlers attached to the browser's resize event when the page first loads?

Update

I found out that the following code will fire any handlers attached to the window's resize event:

if (document.createEvent) { // W3C
    var ev = document.createEvent('Event');
    ev.initEvent('resize', true, true);
    window.dispatchEvent(ev);
} else { // IE
    document.fireEvent('onresize');
}

I verified that this does indeed trigger the window's resize event handlers, but when I run this code in the Firebug console, it doesn't fix the layout problem.

So it seems that the code which fixes the layout when the browser is resized is not a handler of the window's resize event, but a handler of something else. How can I go about tracking down which event handler I need to fire?

Is it possible that when the browser is manually resized, the resize event propogates down to all the children of window, but when the code above is executed, the resize handler only fires on window itself?

Answer 1

For IE compatibility

function fireResize(){
    if (document.createEvent) { // W3C
        var ev = document.createEvent('Event');
        ev.initEvent('resize', true, true);
        window.dispatchEvent(ev);
    }
    else { // IE
        element=document.documentElement;
        var event=document.createEventObject();
        element.fireEvent("onresize",event);
    }
};
fireResize();

Answer 2

I tried this in Chrome, Firefox and IE11, and it works:

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

Answer 3

I think you should investigate why the page does not render correctly in the first place. Relying on a re-render after resize sounds hackish to me.

Although manually firing a resize event might not give the correct results, you can also try to hide/show an event triggering a re-render event. This might result in screen flickering, so it is not the optimal solution.

Answer 4

Can also be done with CustomEvent :

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

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

Answer 5

There's an window.onresize event that fires when the window is resized. You can force a resize by changing the window.width or height by a pixel and then setting it back on a small timer.

With jQuery you can do something like this:

$(function() { 
   $(window).width($(window).width() + 1);
  // delay so DOM can update and not batch UI updates
  setTimeout(function() { $(window).width($(window).width() -1); },3);
});

FWIW, I've seen this myself before, but I agree with @bouke that you should defintitely try to identify what's causing the broken layout. I find it usually has to do with floated content or overflow of text containers that causes these sorts of problems.