When I am loading in content from another page using Ajax my footer jumps up to below my header before moving back down.
I recon this is caused by $('#container').remove(); which means I am essentially removing the container before loading in the new container.
Is there a way to stop my footer from jumping up and down between Ajax loads?
Here is my JQuery
$('nav a').on('click', function(e) {
e.preventDefault();
var url = this.href;
$('nav a.highlight').removeClass('highlight');
$(this).addClass('highlight');
$('#container').remove();
$('#content').load(url + ' #container').hide().fadeIn(3500);
});
I'v uploaded an example of what is happening to me on a test server here.
I had to upload it as a snippet or pen does not allow more than one HTML page
Do not remove #container
$('nav a').on('click', function(e) {
e.preventDefault();
var url = this.href;
$('nav a.highlight').removeClass('highlight');
$(this).addClass('highlight');
//$('#container').remove();
$('#content').load(url + ' #container').hide().fadeIn(3500);
});
I'm not perfect but i think this can help you to get an idea. You can set min-height of #content or you can add a class .stick_footer to footer immediately after removing container and remove class .stick_footer after data loaded. sorry for bad english.
.stick_footer{
position:absolute; bottom:0;left:0;right:0; top:9em;
}