and CSS-Breite: calc(100%-100px); Alternative mit jQuery




jquery post download file (5)

Ich möchte width: calc(100% -100px); das macht den Job perfekt für das, wofür ich es brauche, das einzige Problem ist seine Kompatibilität. Im Moment funktioniert es nur in den neuesten Browsern und überhaupt nicht in Safari.

Könnte ich eine Alternative mit jQuery machen? dh. Erhalte die 100% -Breite eines Objekts -100px und setze das Ergebnis dann dynamisch als CSS-Breite (so dass es reaktionsfähig wäre)


Wenn Sie einen Browser haben, der den calc Ausdruck nicht unterstützt, ist es nicht schwer, mit jQuery zu imitieren:

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

Es ist viel einfacher, jQuery die relative Berechnung handhaben zu lassen, als dies selbst zu tun.


Es ist nicht so schwer, in Javascript zu replizieren :-), obwohl es nur für Breite und Höhe am besten funktioniert, aber Sie können es nach Ihren Erwartungen erweitern :-)

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

Ich denke, das könnte ein anderer Weg sein

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

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

100% -100px ist das gleiche

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

Mit jQuery:

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

Eine ähnliche Methode ist die Verwendung von jQuery resize plugin


Versuchen Sie die jQuery animate() -Methode, z.

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




css