Question

What I want is an animated div which will toggle height between 300px and 100% of the window height minus 26 px. The problem i’m facing is that the div wont update it’s expanded size after a window resize. I always want it to expand to windowheight-26px, but right now it only toggles to the first windowheight, it doesnt update. The code that i have right now is:

$j(document).ready(function(){

var $nh = $j(window).height()-26;   

$j("#header-wrap").toggle(function(){
    toggleHeaderDown($nh);
},function(){
    toggleHeaderUp();
});

function toggleHeaderDown(y){
    $j("#header-wrap").animate({height:y},400,'easeInOutQuart');
    $j("#header-image").animate({height:'100%'},400,'easeInOutQuart');
    $j("#head1, #head2, #head3, #head4").animate({top: 0},400,'easeInOutQuart');
};
function toggleHeaderUp(){
    $j("#header-wrap, #header-image").animate({height:300},400,'easeInOutQuart');
    $j("#head1").animate({top: -50},400,'easeInOutQuart');
    $j("#head2").animate({top: -370},400,'easeInOutQuart');
    $j("#head3").animate({top: -200},400,'easeInOutQuart');
    $j("#head4").animate({top: -330},400,'easeInOutQuart')
};});



$j(window).resize(function() {

$nh = $j(window).height()-26;

});

Answer 1

I would calculate $nh at toggleHeaderDown:

function toggleHeaderDown() {
       $nh = $j(window).height() - 26;
       // ...
}

That way you don’t need to wait the resize event to get the correct value for height