Question

I’m struggling to work out how to do this. I have some jqGrid elements inside some jQuery UI tabs. To make sure the grids fill the width 100% I’ve written a simple window.resize event.

When the user clicks a button I fade out the tabs, clear and reload the jqGrids, and then fade the tabs back in. You can see it all working here: http://jsfiddle.net/qvY9s/7/ (click the ‘Reload’ button to see it working).

However, I want the grid to resize to fill the tab as soon as it starts to become visible. If I call $(window).resize() immediately after calling $(..).fadeIn() on the tabs then it doesn’t work – I’m guessing because the animation hasn’t started yet and the grid hasn’t become visible.

Is there anyway to trigger window.resize just after the fade effect has started?

(I don’t want to have to wait until the end if I can help it.)

Answer 1

This works well, add this line at the top of loadGrids() function:

$('#container').show().css('visible', false);

idea being to make the container invisible but using up its normal layout space before fading it in

jsFiddle for this: http://jsfiddle.net/qvY9s/9/