CODEWITHSUNDEEP
jquerycssslideup
CallumVass
CallumVass

Reputation: 11448

Jquery / CSS - Make the container element keep the same height when using slideUp();

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.

Upvotes: 1

Views: 2348

Answers (2)

Jules
Jules

Reputation: 7223

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

});

Upvotes: 6

spb
spb

Reputation: 987

You can set the parent's height in css anytime before hiding the child element: EDIT: just set the height directly with jQuery:

var parent = $('#parent');
parent.height(parent.height());

Upvotes: 0

Related Questions