CODEWITHSUNDEEP
jquerycssoverflow
Moe Sweet
Moe Sweet

Reputation: 3721

CSS/jQuery: Reduce the height of overflow'ed div as another div slides in

Here is my fiddle http://jsfiddle.net/vZjnd/

Given the facts

.wrapper height is fixed.

.main is overflow-auto.

.slide content is variable so height is variable from time to time.

my goal is

.main to be pushed up (height reduced) as .slide occupies part of .wrapper

Any idea?

Upvotes: 3

Views: 937

Answers (2)

Samich
Samich

Reputation: 30115

Here is my solution:

$('#up').click(function() {
    $('.slide').slideUp(function() {
        $('.main').height($('.main').height() + $('.slide').height() + 'px');
    });
});

$('#down').click(function() {
    $('.slide').slideDown(function() {       
        $('.main').height($('.main').height() - $('.slide').height() + 'px');
    });
});

code: http://jsfiddle.net/vZjnd/5/

You can use animate to make it more smoothly.

Upvotes: 5

Stijn_d
Stijn_d

Reputation: 1078

The only way I could think of to accomplish this is by doing the following: Add a new rule to the onclick, $('.main').animate({'height': '-=15px'}, 500); or use += when sliding it away? but this does mean that the scrollbar will disappear during the animation.

Upvotes: 0

Related Questions