Question

I was wondering if there was a way to make the parent container keep the same height when using slideup(); The reason for this is that I make an element slideUp, then slideDown with new data but this makes the browser window scroll up to the top when the slideUp begins, so it gets rather annoying, especially on low resolutions.

Answer 1

You can simply grab the parent’s height and set it to a fixed one through JQuery like in the example I made on JSFiddle:

http://jsfiddle.net/wEGk5/

$(document).ready(function() {

    $('input#slideup').click(function() {
        //Fix the current height of the parent container
        $('div.parent').css({ 'height' : ($('div.parent').height())});
        //Slide up and add new content to the div
        $('div#slider').slideUp('slow', function() {
            $('div#slider').html("New content!<br />New content!");
        });

        //Slide down again and watch how the parent container didn't move!
        $('div#slider').slideDown();
    });

});