Jquery: Prevent Div From Collapsing When Element Hides()

When my form is submitted, the form 'slides out' and using $.get(), I load another page and slide that in. In between the hiding of the form and the showing of the next page, the d

Solution 1:

Are you using CSS? I'm gonna make an assumption (bad I know but I can't see any code) you use display:none; to hide the div, instead you should try using visibility:hidden. If you're using JQuery maybe you could add a css() method to the selector and set the visibility to hidden this way.

Solution 2:

What @user1394965 said. Here's a quick example:

The .hide() will make the object's css property be display: none which will remove the space it takes up on the page. The visibility: hidden property will make it hidden but still keep its space on the page.

So, instead of doing:

$('#elementId').hide();

do the following:

$('#elementId').css('visibility', 'hidden');

Solution 3:

The other options above are likely better, you do have the option of setting the hieght based on the child div but it is hard to know if this is a good idea without seeing any code.

For example (untested):

var height = $('#childdiv').height();
$('#childdiv').parent().css('height', height);

Solution 4:

Specify a height for the div during the animation only. That is, before you slide out the old form, change the div to the same height. After the new form slides in, remove this set height.