JavaScript replace content by sliding more content in without losing height

Question

So i currently have a setup that allows for a button to be pressed, the current content is hidden, and more content scrolls in from the right. However my problem is that for the briefest of moments the footer, which sits below the content, moves up before moving back down below the content just loaded in.

This fiddle best illustrates the problem: http://jsfiddle.net/9Dubr/766/

My Code:

$('#rightButton').click(function(){

    var toLoad = 'page.html #content';

    $('#content').hide("fast", loadContent);

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent);
    }

    function showNewContent() {
        $('#content').show("slide", {direction: "right" }, 1000 );
    }

    return false;

});

Thanks for your help

possible duplicate of [jQuery hide element while preserving its space in page layout](http://stackoverflow.com/questions/6393632/jquery-hide-element-while-preserving-its-space-in-page-layout) — Abdul Ahmad, Apr 19 '15 at 04:25
@AbdulAhmad those questions all refer to just hiding content without losing the space taken up, i want to know how to hide the content and then replace it using the "slide" animation without losing its space — Joe Maher, Apr 19 '15 at 04:28
you can set the css to visibility hidden, thats the only way to 'hide' something without losing its space. Otherwise you need a container to take up the space and load content into that, that way theres always an element taking up the space — Abdul Ahmad, Apr 19 '15 at 04:29
see the answer I've posted, is that what you were looking for? — Abdul Ahmad, Apr 19 '15 at 04:34

score 0 · Accepted Answer · answered Apr 19 '15 at 04:29

0

The fiddle doesn't seem to work for me, but it sounds to me like your footer is simply trying to occupy the empty space left behind by the previous content. In which case, you can try giving the parent container of your content a fixed height just before hiding it. You can then unset the height once the next content is loaded, that way there isn't really any empty space for the footer to try and occupy.

Untested code:

$('#content').parent().css({height: $('#content').height()});
$('#content').hide("fast", loadContent);

...

function showNewContent() {
    $('#content').show("slide", {direction: "right", complete: function() {
        $('#content').parent().css({height: ''});
    } }, 1000 );
}

If you'd like to make it more visually appealing, you can animate the height so the footer will get pushed/pulled more smoothly.

Hope this helps.

answered Apr 19 '15 at 04:29

irot

592
1
6
13

Yes thankyou this is what i have ended up doing, http://jsfiddle.net/9Dubr/768/ is an example – Joe Maher Apr 19 '15 at 04:41
why're you using jQuery for simple css? just add a height to the container div – Abdul Ahmad Apr 19 '15 at 04:44
Because the height changes, it wont always be 200px – Joe Maher Apr 19 '15 at 04:45
he never said that anywhere, but ok – Abdul Ahmad Apr 19 '15 at 04:47

score -1 · Answer 2 · answered Apr 19 '15 at 04:37

It may be because the page is allowed to resize the lengths of divs. A few suggestions that might work is:

Quick Fixes:

Hiding your footer until the person is at the bottom of the screen
Making your footer a static size and maybe even making the footer position final.
Adding a fixed size container around your objects as mentioned in a previous comment.

This way atleast it won;t bother the footer in any way.

Fix without changing footer:

It is obviously a load problem when the button itself is pressed. Because as I understand from your code when the button is pressed and then you are adding this new content to your page right before using the slide effect.

I would suggest you preload the content when first opening the page and then just use the .slide() when the button is pressed.

JavaScript replace content by sliding more content in without losing height

2 Answers2