css width: calc (100% -100px); alternatywa przy użyciu jquery

Question

Chciałbym użyć width: calc(100% -100px);, który doskonale spełnia to zadanie, a jedynym problemem jest jego kompatybilność. W tej chwili działa tylko w najnowszych przeglądarkach i wcale nie działa w Safari.

Czy mogę utworzyć alternatywę za pomocą jQuery? to znaczy. uzyskać 100% szerokość obiektu -100px, a następnie dynamicznie ustawić wynik jako szerokość CSS (aby był responsywny)

Answer 1

Jeśli masz przeglądarkę, która nie obsługuje wyrażenia calc, nie jest trudno naśladować z jQuery:

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

Znacznie łatwiej jest pozwolić jQuery obsługiwać względne obliczenia niż robić to samemu.

Answer 2

100% -100px jest taka sama

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

z jQuery:

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

Podobny sposobem jest użycie jQuery resize plugin

Answer 3

Spróbuj jQuery animate() metody ex.

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

Answer 4

nie jest tak trudne do powtórzenia w javascript :-), choć to będzie działać tylko dla szerokości i wysokości najlepszy, ale można go rozwinąć, jak na swoje oczekiwania :-)

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

If chcesz użyć calc w swoim pliku CSS użyj polyfill jak PolyCalc. Powinien być wystarczająco lekki, by działał w przeglądarkach mobilnych (np. Pod telefonami z systemem iOS 6 i Android 4.4).

Answer 6

myślę, że może to być kolejny sposób

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

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