CODEWITHSUNDEEP
jqueryvariablesheight
Peter Boomsma
Peter Boomsma

Reputation: 9806

Use div height for marginTop

I need to make a simple animation, but the problem is that they height of the contentblock is not set (depends on how much text is in it). So I figured I needed to know the height of the contentblock and put that number in the marginTop. But as you figured out, I don't know how to do that.

$('nav').hide().fadeIn(1200, function(){
    $('#content_home').animate({
    marginTop: '-50px'},1000);    
});

This is the jQuery code I use for my animation. So I need the height of #content_home and put that in the marginTop value.

I guess I need to write a function that calculates the height and puts it in a variable, and that variable I need to put into the marginTop value.

Upvotes: 1

Views: 65

Answers (4)

CR41G14
CR41G14

Reputation: 5594

I think you answered your own question:

I guess I need to write a function that calculates the height and puts it in a variable, and that variable I need to put into the marginTop value.

You calculate the height of something by using the .height() function so simply:

$('nav').hide().fadeIn(1200, function(){
    var height = ($('#contentblock').height() * -1);

    $('#content_home').animate({
    marginTop: height},1000);    
});

Upvotes: 1

sebastiang
sebastiang

Reputation: 34

Can't you just use the .height() method on the jQuery $('#content_home') element?

Upvotes: 1

Cy Pangilinan
Cy Pangilinan

Reputation: 572

Have you tried .height()?

$('nav').hide().fadeIn(1200, function(){
    var contentHomeHeight = $('#content_home').height();
    $('#content_home').animate({
    marginTop: contentHomeHeight },1000);    
});

Upvotes: 1

HaBo
HaBo

Reputation: 14307

var result = $("#content_home").height();

you can also use other functions like .innerHeight() and .outerHeight() which ever one works for you.

Upvotes: 1

Related Questions