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
– thirtydot, Commented Jun 12, 2012 at 21:47
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
– Alex, Commented Jun 12, 2012 at 23:02
heres a couple of links: stackoverflow.com/questions/4641522/… stackoverflow.com/questions/8840580/… — Alex
– Alex, Commented Jun 12, 2012 at 23:16

billythetalented · Accepted Answer · 2012-06-12 21:48:42Z

7

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

$(window).trigger('resize')

answered Jun 12, 2012 at 21:48

billythetalented

6376 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MaxArt Over a year ago

Instead of triggering an event, the listener function can be directly called.

typeoneerror Over a year ago

Has no effect, unfortunately. That was the first thing I tried.

Martin Hansen Over a year ago

@MaxArt if there are multiple listener functions then it's better to trigger the event. That way they all fire.

MaxArt Over a year ago

Oh dear, I really hope there aren't multiple onresize listeners :)

Mike Moon Over a year ago

I had a use-case this applied to and it solved my problem so thanks!

Community · Accepted Answer · 2017-05-23 12:31:58Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 13, 2012 at 0:23

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Comments

Ash · Accepted Answer · 2012-06-12 22:02:48Z

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, 2012 at 22:02

Ash

3,6212 gold badges17 silver badges15 bronze badges

Collectives™ on Stack Overflow

Force dom reload/resize in Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related