jQuery remove() is moving my div blocks... how can I fix their positions?

Question

I'm using jQuery to refresh content in container DIV. When the refresh link is clicked, I call jQuery to remove() the content DIVs and then load() to re-create them and the content.

The problem is I have menus and navigation at the bottom and when I refresh the content, all the bottom nav gets pushed up temporarily after the DIVs are remove()'d while the Ajax content loads.

HTML:

 <div id="container">
    <!-- Below PHP include generates contentdiv1 and contentdiv2 -->
    <?php include($_SERVER['DOCUMENT_ROOT']."/content.php"); ?>
</div>
<div id="refresh">
    <a href="javascript: void(0)" id="refreshbutton">Refresh</a>
</div>
<div id="bottomnav">
    <!-- nav menus and copyright type junk here is getting pushed UP^^^ -->
</div>

JAVASCRIPT:

// This occurs when the "refresh" link is clicked
$('div#contentdiv1').remove();
$('div#contentdiv2').remove();
$('div#container').load('/content.php?rnd='+ Math.random()*999999);

All help is appreciated. Thanks

Answer 1

You may not have to remove the content if you are re-loading the div. The load will replace the content automatically.

One option is to fade the content while the load is happening so it appears as if the content fades to the new content.

Answer 2

well, you don't really have to remove them.. you could reuse them...

But if you really have to because you just have to, then you can make a container for the divs that has to be removed. Then that container will then use all the space that it has to, so that when you remove the divs nothing will change.... ;))

Answer 3

The load() will replace the content when it has it, no need to .remove() first. At least that's how it works whenever I use it.

Answer 4

Thanks everyone, you're all right, the load() does indeed replace the content.

I figured out the issue was actually that I'm using fadeIn() with the load(), so if you click refresh before the fadeIn() (using 3 seconds fadeIn), then the bottomnav DIV moves up.

If you wait for the fadeIn() to finish, then noting in the bottomnav DIV moves.

Is there a way to interrupt a fadeIn() call that is running so that my bottomnav DIV doesn't get pushed up temporarily?

To be honest, I'm not sure why interrupting fadeIn() would cause that behavior.