Using CSS property calc() with JS

Question

I am needing to use the css calc() property to displace an element on the screen. Works fine if I do it via CSS however this CSS property need to be displaced by 50% - a variable worked out in JS.

See this example:

var displace = childHeight / 2
parent.css({'top': 'calc( 50% -' + displace + 'px)'});

When this runs however, it does not get applied to the HTML element on the page. To clarify that this DOES work with other stuff, if I were to type:

parent.css({'top': '50px'});

This would work and i've tested it and it applies. This means that there is an issue with applying the calc() via JS to a css element. Perhaps it is the way I have concatenated the variable into the calc().

Anybody have any suggestions?

what is parent? elements dont have a .css() method. are you talking about jquery — atmd
– atmd, Commented May 26, 2016 at 13:54

Nutshell · Accepted Answer · 2016-05-26 13:55:57Z

3

You need a space after the minus letter :

var displace = childHeight / 2;
$(".test").css({'top': 'calc(50% - ' + displace + 'px)'});

Fiddle here

answered May 26, 2016 at 13:55

Nutshell

8,5251 gold badge21 silver badges38 bronze badges

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

1 Comment

Alex Wiley Over a year ago

1 character.... ONE CHARACTER! Thank you so much! will mark as answer as soon as Stack lets me!

Uzbekjon · Accepted Answer · 2016-05-26 13:57:36Z

1

The + and - operators must always be surrounded by whitespace. So you have to add an extra space here:

//                             |-  === HERE ===
parent.css({'top': 'calc( 50% - ' + displace + 'px)'});

answered May 26, 2016 at 13:57

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

Collectives™ on Stack Overflow

Using CSS property calc() with JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related