CODEWITHSUNDEEP
javascriptjqueryhtmlcss
petergus
petergus

Reputation: 1262

Add a number to .height()

I have this simple Jquery with the aim of setting the height of .button to that of its sibling.

$('.button').height($('.sibling').height());

the actual height of .sibling is 48px (24px + 24px padding, top and bottom).

However the returned height of .sibling excludes the padding, setting .button to 24px, not 48px.

I tried 

$('.button').height($('.sibling').height() + "24" );

but that returns 2412px

What is the proper way to do this? I see either change the original to somehow tell it to grab height plus padding, otherwise how does one do proper math in Jquery in this case?

Upvotes: 0

Views: 283

Answers (3)

Chirag
Chirag

Reputation: 1022

You're not doing addition by doing following.

 $('.button').height($('.sibling').height() + "12" );

But you're concatenating an integer with a string

 $('.button').height($('.sibling').height() + 12 );

This is the right way of doing addition. Hope it helps.

Upvotes: 1

Koby Douek
Koby Douek

Reputation: 16693

The problem is that you are mixing math operation with concatenation.

Try seperating them like this:

var newHeight = $('.sibling').height() + 12;
$('.button').css('height', newHeight + 'px');

Or:

var newHeight = $('.sibling').height() + 12;
$('.button').height(newHeight);

Upvotes: 3

DoXicK
DoXicK

Reputation: 4812

to get the height including padding border etc you can use .outerHeight()

$('.button').height($('.sibling').outerHeight());

Upvotes: 2

Related Questions