CODEWITHSUNDEEP
javascriptjquerycssdomwebkit
typeoneerror
typeoneerror

Reputation: 56958

Force dom reload/resize in Javascript

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.

Upvotes: 1

Views: 12382

Answers (3)

thirtydot
thirtydot

Reputation: 228182

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).

Upvotes: 2

Ash
Ash

Reputation: 3581

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

Upvotes: 1

billythetalented
billythetalented

Reputation: 637

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

$(window).trigger('resize')

Upvotes: 7

Related Questions