Add in integer to returned value with jQuery

Question

I have a page with a div id="videoFrame" that holds the video tag. The videos have variable heights so I have a function to grab the height value and plug it into the css of the div id="videoFrame" like so:

var videoHeight = $('video').attr('height');
$('#videoFrame').css('height',videoHeight+'px');

This works great. But here's the part driving me crazy. I have a p tag with disclaimers at the bottom of the div id="videoFrame". So I would like to add an additional 26px to the returned height. I tried:

var videoHeight = $('video').attr('height');
var frameHeight = videoHeight + 26;
$('#videoFrame').css('height',frameHeight+'px');

But as you would expect it is adding 26 to the end of the returned value. i.e. if returned value is 337 output for var frameHeight is 33726.

I can not for the life of me figure out how to do this.

Thanks in advance for any help

jfriend00 · Accepted Answer · 2011-11-17 01:40:07Z

4

$('video').attr('height') returns a string. Adding a number to a string converts the number to a string and adds the two strings which is not what you want. You want to add two numbers. So, you must convert this string to a number so you can then add two numbers:

var videoHeight = parseInt($('video').attr('height'), 10);
var frameHeight = videoHeight + 26;

There are a several ways to convert a string to a number. Here are a few of the more obvious ones.

parseInt(str, radix)
parseFloat(str)
Number(str)

When using parseInt, always specify the radix, otherwise, it will guess based on the content of the string (which you almost never want).

answered Nov 17, 2011 at 1:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danferth Over a year ago

Works!! Thank you for the help, and the explanation. It's always better if you know why and not just how.

Moe Sweet · Accepted Answer · 2011-11-17 01:40:23Z

1

ParseInt before you add.

var frameHeight = parseInt(videoHeight) + 26;

answered Nov 17, 2011 at 1:40

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

Comments

CodeMonkeyG · Accepted Answer · 2011-11-17 01:39:44Z

0

Try this.

var frameHeight = Number(videoHeight) + 26;

answered Nov 17, 2011 at 1:39

CodeMonkeyG

1854 bronze badges

Comments

Robert Van Sant · Accepted Answer · 2011-11-17 01:40:00Z

0

you should wrap parseInt() around the videoHeight variable. try that, i hope this helps.

answered Nov 17, 2011 at 1:40

Robert Van Sant

1,50710 silver badges12 bronze badges

Comments

mnsr · Accepted Answer · 2011-11-17 01:40:02Z

0

You have to use parseInt

var videoHeight = parseInt($('video').attr('height'));

answered Nov 17, 2011 at 1:40

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

Comments

dnuttle · Accepted Answer · 2011-11-17 01:40:35Z

0

var frameHeight = parseInt(videoHeight,10) + 26;

answered Nov 17, 2011 at 1:40

dnuttle

3,8402 gold badges23 silver badges19 bronze badges

Comments

vgardner · Accepted Answer · 2011-11-17 01:47:00Z

0

var videoHeight = parseInt($('video').attr('height'));
var frameHeight = videoHeight + 26;

answered Nov 17, 2011 at 1:47

vgardner

5175 silver badges20 bronze badges

Collectives™ on Stack Overflow

Add in integer to returned value with jQuery

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related