how to use css Calc function in JavaScript ?

Question

i have a position set by calc function exp
position:absolute;
top:calc(85vh - 20px);
and i need to use that position in javascript but it doesnt work .
anyone can help me with it ?

Answer 1

idk.. if its possible, but my solution is get the elements by its class. then use style.top = calc()

for(let e of document.getElementsByClassName=('yourclass'))
e.style.top = calc("85vh - 20px");

but this method doesnt change the css file, instead its adding an inline style in the html tag/elements

Answer 2

By original position, I think you mean position relative with top 0

Answer 3

ooooh create 2 css rule

.normal{
/*original css*/
}

.upabit{
top: 60px;
}

now in jquery you'll only need to toggle class upabit from the element.

Answer 4

thanks and instead of calc how can i declare original position ? i tried auto and none but it didn't work

Answer 5

the original position is calculated with css like the example above

Answer 6

calc is a CSS function, in JavaScript, you assign like this:

element.style.top = (window.innerHeight*0.85 - 20) + "px";

Answer 7

this is my code so what can i write instead of original position to go back to original ?

$(function() {
$(".b").click(function() {
$(".pp").animate({top: '60px' }, 1000);
});
$(".pn").click(function() {
$(".pp").animate({ top: ' original position' }, 1000);
});
});

Answer 8

Store the position before the first animation

$(function() {
var top = $(”.pp”).position().top;
$(".b").click(function() {
$(".pp").animate({top: '60px' }, 1000);
});
$(".pn").click(function() {
$(".pp").animate({ top: top}, 1000);
});
});

Answer 9

thanks guys that was really helpful