CODEWITHSUNDEEP
jquerycss
SparrwHawk
SparrwHawk

Reputation: 14153

Make a calculation with jQuery and a CSS property

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;

Upvotes: 1

Views: 2016

Answers (4)

Bryan
Bryan

Reputation: 1153

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

Upvotes: 0

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

try this,

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

Upvotes: 1

Clive
Clive

Reputation: 36957

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;

Upvotes: 3

Matt
Matt

Reputation: 75307

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

Upvotes: 5

Related Questions