Make a calculation with jQuery and a CSS property

Question

I'm trying to make a calculation with a css property but it doesn't return anything.

I think it may be because the css property is returning '200px' rather than simply '200'. Can anyone suggest a work around? Many thanks.

windowHeight = $(window).height(); // This works
logoHeight = $('.home h1').css('height'); // This returns '200px'
logoPosition = windowHeight * 0.5 - logoHeight;

The value you request from css is a string containing 'px' you need to replace this via JS yuorself or parse the number. — Smamatti
– Smamatti, Commented Nov 14, 2011 at 11:59
Note that there are better ways to center something vertically than javascript. — Eric
– Eric, Commented Nov 14, 2011 at 12:19

Matt · Accepted Answer · 2011-11-14 11:58:26Z

5

You need to convert the "200px" string to an integer; using parseInt

windowHeight = $(window).height(); // This works
logoHeight = parseInt($('.home h1').css('height'), 10); // This returns '200px'
logoPosition = windowHeight * 0.5 - logoHeight;

Otherwise your sum windowHeight * 0.5 - logoHeight is returning NaN (not a number).

It is important to always specify the radix as the second parameter to parseInt, or you'll find things like;

parseInt("022") == 18; // true

answered Nov 14, 2011 at 11:58

Matt

75.4k26 gold badges156 silver badges181 bronze badges

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

Comments

Clive · Accepted Answer · 2011-11-14 11:58:46Z

3

You should just be able to use height() on the <h1> element:

windowHeight = $(window).height(); // This works
logoHeight = $('.home h1').height(); 
logoPosition = windowHeight * 0.5 - logoHeight;

answered Nov 14, 2011 at 11:58

Clive

1

1 Comment

yunzen Over a year ago

This is better than using css('height') because you make better use of jQuery

Chamika Sandamal · Accepted Answer · 2011-11-14 11:58:58Z

1

try this,

windowHeight = $(window).height(); // This works
logoHeight = $('.home h1').css('height'); // This returns '200px'
logoPosition = windowHeight * 0.5 - parseInt(logoHeight);

answered Nov 14, 2011 at 11:58

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

1 Comment

SparrwHawk Over a year ago

Thanks very much - this was the most useful just because it helps me understand the issue and how to put other CSS into an integer.

Bryan · Accepted Answer · 2011-11-14 15:30:24Z

0

Here are some other examples to show you how to use other CSS properties and jQuery methods. Check our jQuery style properties

var element = $('#element');
var borderLeftWidth = parseInt(element.css('borderLeftWidth'), 10); // css border-left-width
var borderRightWidth = parseInt(element.css('borderRightWidth'), 10); // css border-right-width
var fullWidth = element.outerWidth(false); // includes padding and border but not margins

answered Nov 14, 2011 at 15:30

Bryan

1,17313 silver badges17 bronze badges

Collectives™ on Stack Overflow

Make a calculation with jQuery and a CSS property

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related