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?

If your layout is broken and is fixed after a resize, you should fix the layout. What browser is this in? Can you post a link to a live example? — Pekka, Dec 07 '09 at 16:32
Unfortunately its on localhost, I don't have it online, the thing is that it is fixed after a resize as you say .. — Gandalf StormCrow, Dec 07 '09 at 16:34
I think you should really look into how to fix the layout. Working around this using Javascript is shaky. — Pekka, Dec 07 '09 at 16:38
Its not the design issue design is fine , but after certain action the design looks ok only after resize. As I said below "The problem is following, I have left sidebar and central div , onclick I made it so that central div takes the its own space + left sidebar space, after that resize is needed to fix stuff back to normal " — Gandalf StormCrow, Dec 07 '09 at 16:40

score 75 · Answer 1 · edited May 23 '17 at 10:31

75

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

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

edited May 23 '17 at 10:31

Community

1
1

answered Jan 15 '15 at 13:19

BillyTom

2,519
2
17
25

1

Worth noting no support below ie11 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Browser_compatibility – Kiee Mar 08 '17 at 15:04
According to http://caniuse.com/#search=dispatchEvent it should work for IE 9+. However `window.fireEvent()` should also work for IE 10 and under. – Jason Godson Mar 21 '17 at 19:28
1

Apparently, it doesn't work in my IE11. Throws `Object doesn't support this action` – Krzysztof Zbiciński Jul 28 '17 at 10:52

score 8 · Answer 2 · answered Dec 07 '09 at 17:48

8

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

answered Dec 07 '09 at 17:48

Josh Stodola

81,538
47
180
227

hmm can I manually fire the onresize event while firing my event? – Gandalf StormCrow Dec 08 '09 at 08:45
2

Just like it says in my answer: `window.onresize();` – Josh Stodola Dec 08 '09 at 15:59
7

`window.onresize()` is not working for me: `TypeError: Property 'onresize' of object [object global] is not a function` – fnkr Nov 04 '13 at 15:24
From what @JoshStodola says, you can do this: `window.onresize = function() {...};` `$(document).ready( window.onresize() );` Worked with JQuery 3 and Firefox 55.0.3. – rask004 Sep 27 '17 at 23:14

score 4 · Answer 3 · edited Nov 24 '15 at 07:11

4

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

$(window).resize();

edited Nov 24 '15 at 07:11

mico

12,730
12
59
99

answered Apr 24 '13 at 15:37

Flock Dawson

1,842
4
22
34

Doesn't work or at least it doesn't appear to have any affect. Maybe under some conditions it does. – Johann Aug 29 '17 at 16:08

Björn · Accepted Answer · 2009-12-08T14:21:51.697

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

edited Dec 08 '09 at 14:21

answered Dec 08 '09 at 08:53

Björn

29,019
9
65
81

Thank you bjorn.. I'm currently googling solution for ordinary javascrpt – Gandalf StormCrow Dec 08 '09 at 09:16
Nothing yet, how bout if I resize/restore really fast is that possible? – Gandalf StormCrow Dec 08 '09 at 13:20
Sorry Björn I had some other projects to attend to .. I guess its working .. I'll accept your answer for now (didn't have time to test it). thank you – Gandalf StormCrow Dec 09 '09 at 15:50
I think BillyTom has the best answer. We could accept that answer or integrate that answer into this one. – Gavin Palmer Dec 09 '15 at 11:27
I agree @BillyTom has the best answer. However to answer the question of how mootools does it, they simply store handles to all the event callbacks, and when you "refireEvent" it directly calls the function. See: https://github.com/mootools/mootools-core/blob/2f0aee54c40525e4261b556bc6ed2a12a619db73/Source/Element/Element.Event.js#L103 – Cody Allan Taylor May 23 '16 at 15:28

score 0 · Answer 5 · answered Jul 16 '20 at 12:03

Following is the working solution:

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}

score -2 · Answer 6 · answered Dec 07 '09 at 16:35

-2

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?

answered Dec 07 '09 at 16:35

prodigitalson

60,050
10
100
114

Hmm the problem is following, I have left sidebar and central div , onclick I made it so that central div takes the its own space + left sidebar space, after that resize is needed to fix stuff back to normal – Gandalf StormCrow Dec 07 '09 at 16:38
how are your columns laid out? its probably your layout that needs fixed as suggested above. personally id float them both left in side a wrapper with a clearfix on it and modify from there. Since theyd both be in document flow that should fix the issues youre having i would think. – prodigitalson Dec 07 '09 at 16:47
http://www.quirksmode.org/css/clearing.html - Auto Method http://www.positioniseverything.net/easyclearing.html - pseudo class method – prodigitalson Dec 07 '09 at 16:57
Can you post the relvent parts of you layout and css? – prodigitalson Dec 07 '09 at 16:58
I already did.. http://stackoverflow.com/questions/1859559/trying-to-change-width-on-click – Gandalf StormCrow Dec 07 '09 at 17:04
ok added a comment there will echo the same here: Given that content is floated isnt a percentage based width going to be calculated from the last parent element in the hierarchy that is given a hard width or if none its intrinsic width? What happens if you give #contentholder a hard width in px/pt/cm or alternately use one of the former units in your dynmic width assignment for content? – prodigitalson Dec 07 '09 at 18:05

Forcing windows resize to fire

6 Answers6

Linked

Related