css-calc

I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible. Example: CSS .anyclass{ height:250px; /*this value can change dinamically */ transform:scale(calc(100% / 490 )); /*is using height value*/ } This definition gives back an invalid property value. Other uses like translate: .anyclass{ transform:translate(calc(100% - 50px )); } works with no problem. Is there anyway i

We have now started using calc() in css, for setting widths on a result of calculation. For example: <div id='parent'> <div id='calcWidth'></div> </div> #parent{ width:100px; } #calcWidth{ width:calc(100% - 3px); height:100px; background:red; } I know how calc() works, but I just want to know what is returned in css, in the place of calc(100% - 3px); in the example given above. Whats my confusion? In the above example width:calc(100% - 3px); say the 100% width is actually 100px , which will be determined at runtime by css. So the calculated width will be 100px-3px=97px 97px and if you convert

How can I do this? $('#element').animate({ "width": "calc(100% - 278px)" }, 800); $('#element').animate({ "width": "calc(100% - 78px)" }, 800); I can do it if it's only % or only px , but not calc() , can I use some other option of jQuery? or some other trick of JavaScript? It's a change that have to be done when the user clicks some element, so: $("#otherElement").on("click", FunctionToToggle); when the user clicks the $("#otherElement") the toggle effect has to occur. maybe this helps: $('#element').animate({ "width": "-=278px" }, 800); every time this script will remove 278px from the

I would like to use inherit with calc() like this: #foo { animation-duration: 10s; } #foo > .bar { animation-duration: calc(inherit + 2s); /* =12s */ } But it don't seem to works. Is it browsers bug or specs? The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade . Furthermore, the calc() function itself only takes literal numeric values such as numbers, dimensions and percentages . So to put

I tried to set CSS calc() using jQuery animate, for example: $element.animate({ height: 'calc(100% - 30px)' }, 500); and I noticed that calc() is not working with jQuery animate... I hope that there is a way to do it, I don't want a similar way to do it, an alternative or a workaround, I want to set calc() Is this impossible? In any way? If it is possible, please can you show how? Setting calc() like you want won't work. The easiest way to do it is to "calculate" it's value into a variable, something like this: var newHeight = $('.container').height() - 30; then you can use the animate() with

Is there a way to use variables in less ~ operator, like ~"calc(70% - @spacing)"; When I have tried it it only works with static values like ~"calc(70% - 10px)"; Can I get the string to be evaluated prior to beeing set as a property. To disable the calculation which LESS does automatically when discovering a - between two numeric values but still being able to use variables, you can write one of the following: 1) Only escape the operator that triggers the calculation and use the variable like you normally do @padding: 20px; body { padding: calc(100% ~"-" @padding); } 2) Escape the whole

Alright so in my CSS I'm trying to do the math calc((100%/5)+10px); When I do this It doesn't work. When I do calc(100%/5); It works just fine. What do I need to do to get the +10px working? What you need to do, is use the proper syntax: calc((100%/5) + 10px) https://developer.mozilla.org/en-US/docs/Web/CSS/calc : “Note: The + and - operators must always be surrounded by whitespace.” 来源： https://stackoverflow.com/questions/25298829/css-calc100-510px-isnt-working