Force dom reload/resize in Javascript

Question

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

Edit: Seems like it might be a Webkit issue. Works fine in Firefox.

Edit 2: Set up a simplified build at the following location:

https://dl.dropbox.com/u/189605/misc/build-test/grid.html

You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.

Are you sure `$('sidebar-toggle')` is correct? Maybe it should be `$('#sidebar-toggle')` instead? — thirtydot, Jun 12 '12 at 21:47
Can you make a test case? http://jsfiddle.net/ / http://jsbin.com/ — thirtydot, Jun 12 '12 at 22:31
I've seen something similar but only on chrome whereby the repaint engine needs to be set, but thats also only if youre using transforms in css — Alex, Jun 12 '12 at 23:02
@Alex is there a hack for "setting the repaint engine"? Not sure what you mean. — typeoneerror, Jun 12 '12 at 23:14
heres a couple of links: http://stackoverflow.com/questions/4641522/how-to-force-re-render-after-a-webkit-3d-transform-in-safari http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac — Alex, Jun 12 '12 at 23:16
it helped me a lot when I was using transforms cos webkit's a bit buggy repainting transformed areas — Alex, Jun 12 '12 at 23:17
Hmm, yeah, none of the linked solutions worked. Guess I'll file a bug. — typeoneerror, Jun 12 '12 at 23:31

score 7 · Answer 1 · answered Jun 12 '12 at 21:48

7

you could just trigger a resize in your click handler, eg:

$(window).trigger('resize')

answered Jun 12 '12 at 21:48

billythetalented

569
5
7

Instead of triggering an event, the listener function can be directly called. – MaxArt Jun 12 '12 at 21:51
Has no effect, unfortunately. That was the first thing I tried. – typeoneerror Jun 12 '12 at 21:57
@MaxArt if there are multiple listener functions then it's better to trigger the event. That way they all fire. – Martin Hansen Jun 12 '12 at 21:57
Oh dear, I really hope there aren't multiple `onresize` listeners :) – MaxArt Jun 12 '12 at 22:02
I had a use-case this applied to and it solved my problem so thanks! – Mike Moon Jul 31 '20 at 21:29

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

The workaround from my answer here works for your situation.

Here's a quick demo: http://jsbin.com/amakex

It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).

edited May 23 '17 at 12:31

Community

1
1

answered Jun 13 '12 at 00:23

thirtydot

224,678
48
389
349

score 1 · Answer 3 · answered Jun 12 '12 at 22:02

1

you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that

answered Jun 12 '12 at 22:02

Ash

3,431
2
15
15

Force dom reload/resize in Javascript

3 Answers3

Linked