Forcing windows resize to fire

Question

I have problems with my layout, when I re-size window manually and restore it to normal everything is in the perfect place.

Is it possible to trick the browser and do something with JavaScript that would actually make the browser think that the page has been re-sized so that my layout looks as it should?

UPDATE:

Can I re-size and restore window so that user barely notices?

Answer 1

You can resize the window like this...

window.resizeTo(width, height);

And if you need to trigger the event handler, you can do that like this...

window.onresize();

Answer 2

You could use the jQuery resize() method, like this:

$(window).resize();

Answer 3

toggle the display attribute on the areas that need to be redrawn. for example:

var toDraw = document.getElementById('redrawme');
toDraw.style.display = none;
toDraw.style.display = '';

I dont know whqt the result would be if you tried to do the entire body element as ive never tired it before.

What are you doing that you need to force a redraw?

Answer 4

Since then a better solution has been posted in https://stackoverflow.com/a/18693617/2306587:

window.dispatchEvent(new Event('resize'));

Answer 5

This is possible with Mootools (which means it can be done without a framework as well), here's an example:

window.addEvent('domready', function() {
 window.addEvent('resize', function() {
  alert('f');
 });
 (function() {
  window.fireEvent('resize');
 }).delay(3000);
});

3 seconds after the DOM-structure has loaded, the resize-event will be fired for the window-object.

Edit;

I have no clue how Mootools solves their fireEvent for the resize event. I tried Google, but found nada. You can of course resize the window manually, but this is really a hack:

function fireOnResizeEvent() {
 var width, height;

 if (navigator.appName.indexOf("Microsoft") != -1) {
  width  = document.body.offsetWidth;
  height = document.body.offsetHeight;
 } else {
  width  = window.outerWidth;
  height = window.outerHeight;
 }

 window.resizeTo(width - 1, height);
 window.resizeTo(width + 1, height);
}

window.onresize = function() {
 alert("Resized!");
}