larghezza css: calc (100% -100px); alternative using jquery

Question

Mi piacerebbe usare width: calc(100% -100px); che fa perfettamente il lavoro per quello che mi serve, l'unico problema è la sua compatibilità. Al momento funziona solo negli ultimi browser e non in Safari.

Posso fare un'alternativa usando jQuery? vale a dire. ottenere il 100% di larghezza di un oggetto -100px e quindi impostare dinamicamente il risultato come larghezza CSS (quindi sarebbe reattivo)

Answer 1

Se si dispone di un browser che non supporta l'espressione calc, non è difficile imitare con jQuery:

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

È molto più semplice lasciare che jQuery gestisca il calcolo relativo piuttosto che farlo da solo.

Answer 2

100% -100px è lo stesso

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

Con jQuery:

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

modo simile è quello di utilizzare jQuery resize plugin

Answer 3

Prova jQuery animate() metodo, es.

$("#divid").animate({'width':perc+'%'}); 

Answer 4

Non è così difficile da replicare in javascript :-), anche se funziona solo per la larghezza e l'altezza delle migliori ma è possibile espanderla secondo le vostre aspettative :-)

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

Answer 5

Se vuoi usare calc nel tuo file CSS usa un polyfill come PolyCalc. Dovrebbe essere abbastanza leggero da funzionare sui browser mobili (ad esempio sotto iOS 6 e sotto i telefoni Android 4.4).

Answer 6

Penso che questo possa essere un altro modo

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

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });