JQuery: Prevent div from collapsing when element hides()

Question

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 div collapses and all my footer stuff briefly ends up where the form was.

Then, when the "next page" finishes loading, the footer goes back to the bottom (under the new page content). because the size of the form can vary a lot, i'm trying to avoid specifying a height for the DIV.

Is there any way to keep the div from changing?

Code:

$("#MyForm").hide("slide", { direction: "left" }, 250, function () {
    $.get("../NewPage.html", function (data) {
        $("#NewPagePlaceholder").html(data);
        $("#NewPagePlaceholder").show("slide", { direction: "right" }, 250);
    });
});

Answer 1

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

Answer 2

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.

Answer 3

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');

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