CODEWITHSUNDEEP
jquerycss
jcdrenalynn
jcdrenalynn

Reputation: 11

jQuery animate height 100% - #px

I'm trying to animate a div on hover. The div is inside another div which has varying height based on the window size. My goal is to animate the inner div to top of its parent div minus 60px (the height of a fixed position header), then return to its original height in a callback function. Here is my code that is working but not how i'd like:

jQuery( document ).ready(function() {
    jQuery("#sidebar-top").hoverIntent(
        function () {
            jQuery("#sidebar-top .slide-excerpt").animate({height: '80%'});
        },
        function () {
            jQuery("#sidebar-top .slide-excerpt").animate({height: '85px'});
    });
});

height: '80%' works but the problem occurs when the window is resized, the parent height is changed, and the animated div extends too far. Is there a way to specify height: 100% - 60px?

Upvotes: 1

Views: 477

Answers (1)

freewheeler
freewheeler

Reputation: 1356

You can calculate height and width with calc value:

#sidebar-top .slide-excerpt {
    height: -moz-calc(100% - 60px);  
    height: -webkit-calc(100% - 60px); 
    height: -o-calc(100% - 60px);    
    height: calc(100% - 60px); 
    }

Upvotes: 1

Related Questions