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

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!");
}