and - jquery post download file




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

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

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)


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

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

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

Wenn Sie calc in Ihrer CSS-Datei verwenden möchten, verwenden Sie ein Polyfill wie PolyCalc . Sollte leicht genug sein, um in mobilen Browsern zu funktionieren (z. B. unter iOS 6 und unter Android 4.4-Telefonen).





css