multiple - jquery css width

ancho de css: calc(100%-100px); alternativa usando jquery

Question

Me gustaría usar width: calc(100% -100px); que hace el trabajo perfectamente para lo que lo necesito, el único problema es su compatibilidad. Por el momento, solo funciona en los últimos navegadores y no funciona en Safari.

¿Podría hacer una alternativa usando jQuery? es decir. obtener el 100% de ancho de un objeto -100px y luego establecer dinámicamente el resultado como el ancho de CSS (para que sea receptivo)

Answer 1

100% -100px es lo mismo

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

Con jQuery:

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

Una forma similar es usar el plugin jQuery resize

Answer 2

Creo que esto puede ser de otra manera

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

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

Answer 3

No es tan difícil de replicar en javascript :-), aunque solo funcionará para ancho y alto, pero puedes expandirlo según tus expectativas :-)

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 4

Pruebe el método jQuery animate() , ej.

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

Answer 5

Si desea usar calc en su archivo CSS, use un PolyCalc como PolyCalc . Debe ser lo suficientemente ligero como para funcionar en navegadores móviles (por ejemplo, debajo de iOS 6 y de teléfonos con Android 4.4).

Answer 6

Si tiene un navegador que no admite la expresión de calc , no es difícil imitarlo con jQuery:

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

Es mucho más fácil dejar que jQuery maneje el cálculo relativo que hacerlo usted mismo.