css width: calc (100% - 100px); альтернатива с использованием jquery

Question

css width: calc (100% - 100px); альтернатива с использованием jquery

Я хотел бы использовать width: calc(100% -100px); который отлично справляется с тем, что мне нужно, единственная проблема-его совместимость. На данный момент он работает только в последних браузерах и совсем не в Safari.

могу ли я сделать альтернативу с помощью jQuery? то есть. получите 100% ширину объекта-100px, а затем динамически установите результат как ширину CSS (чтобы он был отзывчивым)

502 6

jQuery css

6 ответов:

Comments

Ничего не найдено.

lonesomeday · Accepted Answer · 2012-06-20 13:10:24

Если у вас есть браузер, который не поддерживает calc выражение, это не трудно имитировать с помощью jQuery:
$('#yourEl').css('width', '100%').css('width', '-=100px');
гораздо проще позволить jQuery обрабатывать относительный расчет, чем делать это самостоятельно.

Selim Reza · Accepted Answer · 2014-09-29 17:19:24

Я думаю, что это может быть другой путь
    var width=  $('#elm').width();

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

odiszapc · Accepted Answer · 2012-06-20 13:30:18

100% - 100px то же самое
div.thediv {
  width: auto;
  margin-right:100px;
}
С помощью jQuery:
$(window).resize(function(){
  $('.thediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});
подобный способ использовать jQuery resize plugin

Ajai · Accepted Answer · 2012-06-20 23:00:18

попробуйте jQuery animate() метод, экс.
$("#divid").animate({'width':perc+'%'});

ShrekOverflow · Accepted Answer · 2013-06-15 16:48:53

его не так сложно реплицировать в javascript : -), хотя он будет работать только для ширины и высоты лучше всего, но вы можете расширить его в соответствии с вашими ожиданиями : -)

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

Nux · Accepted Answer · 2014-03-21 00:27:51

Если вы хотите использовать calc в своем CSS-файле, используйте полифилл, например PolyCalc. Должен быть достаточно легким для работы на мобильных браузерах (например, ниже iOS 6 и ниже Android 4.4 телефонов).