57

I'd like to use width: calc(100% -100px); which does the job perfectly for what I need it for, the only problem is its compatibility. At the moment it only works in the latest browsers and not at all in Safari.

Could I make an alternative using jQuery? ie. get the 100% width of an object -100px and then dynamically set the result as the CSS width (so it would be responsive)

Brian
  • 14,610
  • 7
  • 35
  • 43
sam
  • 9,486
  • 36
  • 109
  • 160

6 Answers6

116

If you have a browser that doesn't support the calc expression, it's not hard to mimic with jQuery:

$('#yourEl').css('width', '100%').css('width', '-=100px');

It's much easier to let jQuery handle the relative calculation than doing it yourself.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • [http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/](http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/) – shareef Jun 20 '12 at 10:18
  • 11
    @odiszapc add `$(window).resize(function() { /* put the jquery calc code here */ });` so it will auto calculate the width during a window resize. – Dexter Huinda Jun 20 '12 at 10:50
  • I know it. See my answer below – odiszapc Jun 20 '12 at 10:55
  • 1
    This approach has a small problem. When I change the width of page, the width of `#yourEl` does not change, it is constant. – Shafizadeh Nov 14 '15 at 16:48
  • 3
    Just incase other people are anal about formatting, there cannot be a space between '=' and the value. So `-= 100px` will not work, it must be `-=100px`. – Gavin Dec 07 '16 at 17:28
26

I think this may be another way

    var width=  $('#elm').width();

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });
Selim Reza
  • 1,004
  • 9
  • 12
18

100%-100px is the same

div.thediv {
  width: auto;
  margin-right:100px;
}

With jQuery:

$(window).resize(function(){
  $('.thediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});

Similar way is to use jQuery resize plugin

odiszapc
  • 4,089
  • 2
  • 27
  • 42
  • with the top example, would that work if the item is `position:absolute; top:0; left:0; ` – sam Jun 20 '12 at 10:17
  • just been playing arround with it, in your js it throughts up an error on line 2 the $(window) line `` – sam Jun 20 '12 at 10:29
  • Would you css example work if it was `width:90%; margin-right:-100px;` – sam Sep 04 '13 at 11:19
1

Try jQuery animate() method, ex.

$("#divid").animate({'width':perc+'%'});
Bhavesh G
  • 3,000
  • 4
  • 39
  • 66
Ajai
  • 99
  • 4
  • 1
    I'm actually trying to use animate with the calc function described above, but having trouble:`$('#button-sidebar').animate({width: calc(50% + 20px)},400);` – bhoward Feb 22 '14 at 01:28
  • I don't think that you can use jQuery to animate calc Css variables. You could animate both `'width', '100%'` and `'width', '-=100px'` in the same action and it will do what you want. – Nick Felker Jul 25 '14 at 04:56
1

Its not that hard to replicate in javascript :-) , though it will only work for width and height the best but you can expand it as per your expectations :-) 

function calcShim(element,property,expression){
    var calculated = 0;
    var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")","");
    // Remove all the ( ) and spaces 
    // Now find the parts 
    var parts = freed_expression.split(/[\*+-\/]/gi);

    var units = {
        'px':function(quantity){
            var part = 0;
            part = parseFloat(quantity,10);
            return part;
        },
        '%':function(quantity){
            var part = 0,
            parentQuantity = parseFloat(element.parent().css(property));
            part = parentQuantity * ((parseFloat(quantity,10))/100);
            return part;
        } // you can always add more units here.
    }

    for( var i = 0; i < parts.length; i++ ){
        for( var unit in units ){
            if( parts[i].indexOf(unit) != -1 ){
               // replace the expression by calculated part.
               expression = expression.replace(parts[i],units[unit](parts[i]));
               break;
            }
        }
    }
    // And now compute it. though eval is evil but in some cases its a good friend.
    // Though i wish there was math. calc
    element.css(property,eval(expression));
}
ShrekOverflow
  • 6,795
  • 3
  • 37
  • 48
1

If you want to use calc in your CSS file use a polyfill like PolyCalc. Should be light enough to work on mobile browsers (e.g. below iOS 6 and below Android 4.4 phones).

Nux
  • 9,276
  • 5
  • 59
  • 72