JQUERY, div with a fixed height (with a scrollbar) how to animate until it grows to no longer need a scroll bar?

Question

JQUERY, div with a fixed height (with a scrollbar) how to animate until it grows to no longer need a scroll bar?

I have a div on a page with a CSS height:200px setting, which makes the DIV have a vertical scroll bar, which allows the user to scroll through a bunch of text.

I would like to animate the DIV to expand in height until all content in the div is shown, meaning no more scroll bar

I tried the following:

$("#view-container").animate({"height": "auto"}, "slow");

but that didn't work while this does:

$("#view-container").animate({"height": "1000px"}, "slow");

problem with that is the text size in the DIV is variable. Ideas?

Thanks

Answer 1

What you can do:

Set the height to auto, then record the offsetHeight. Change the height back to what it was immediately - the users won't see the change at all as browsers are single threaded.

Then use jQuery (or not) to animate to that recorded height.

Example:

var vc = document.getElementById('view-container');
var vcold = vc.style.height;
vc.style.height = 'auto';
var vcheight = vc.offsetHeight;
vc.style.height = vcold;
$("#view-container").animate({"height": vcheight + "px"}, "slow");