Question

I’m working on using a project which uses jQuery, and I need to dynamically set a calc() based width using jQuery. The problem is that for calc to work, the CSS needs to look something like this:

CSS

width: -moz-calc(33% - 50px);
width: -webkit-calc(33% - 50px);
width: calc(33% - 50px);

When I try to use jQuery $(selector).css('width', 'calc(33% - 50px)'), I can’t set width with multiple vendor prefixed versions of calc. What’s the right way to handle multiple settings of the same CSS property in jQuery, to allow for vendor-prefixing?

Answer 1

Have you tried something like:

calc = "calc(33% - 50px)";

if ($.browser.webkit) {
  calc = "-webkit-"+calc;
}

$(selector).css('width',calc);