0

how to use css Calc function in JavaScript ?

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 ?

10/20/2019 4:08:12 PM

Ouardi Yacine

10 Answers

New Answer

+3

You should use Element.style.top= "calc(85vh-20px)"; Or you can also give a class like that Element.classList.add("classname"); Inside CSS tab use the classname and set it's attributes you are give positive absolute so simply use top .classname{ .top= "calc(85vh-20px)"; }

+2

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

+1

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

+1

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.

0

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

0

the original position is calculated with css like the example above

0

calc is a CSS function, in JavaScript, you assign like this: element.style.top = (window.innerHeight*0.85 - 20) + "px";

0

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); }); });

0

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); }); });

0

thanks guys that was really helpful