PDA

View Full Version : Animate and resize container to dynamic height



windbrand
03-14-2013, 04:14 AM
Does anyone know how to animate the resizing of a container when the target height is auto?
This is what I use to animate the resize of a container currently, it does resize, but it does not animate. I think it's because it cannot animate when height is auto, as it does animate when height is fixed (such as height: '700px').
.pagecontainer is the overall container, inside it are a bunch of pages (#page1 #page2 #page3 etc), which are the actual content. I'm trying to get .pagecontainer's height to resize.

JS:



<script>

function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}

$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut(0);
setContainerHeight();
$(this.getAttribute("href")).fadeIn();
});

</script>


CSS:



.pagecontainer {
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;
}
.pagecontainer>div{
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;
}


HTML:



<div class="pagecontainer">

<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>

<div id="page1">TONS OF TEXT HERE</div>

<div id="page2">A BIT OF TEXT HERE</div>

<div id="page3">BUNCH OF IMAGES</div>

</div>



Thanks.