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

52

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

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

использовать таким образом с jquery $ ('# dataElement'). css ({"width": "calc (100% -100px)")); Sam T

Ваш Ответ

6   ответов
1

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

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));
}
Нужен пример использования.
1

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

17

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

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

animate() метод, напр.

$("#divid").animate({'width':perc+'%'});
Я на самом деле пытаюсь использовать animate с функцией calc, описанной выше, но у меня возникли проблемы:$('#button-sidebar').animate({width: calc(50% + 20px)},400);
Я не думаю, что вы можете использовать jQuery для анимации переменных Css calc. Вы могли бы оживить оба'width', '100%' а также'width', '-=100px' в том же действии, и он будет делать то, что вы хотите.
16

100% -100px это то же самое

div.

С помощью jQuery:

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

Аналогичным способом является использованиеПлагин изменения размера jQuery

только что играл с ним, в вашем js он выдает ошибку в строке 2 в строке $ (window)<script type="text/javascript"> $(window).resize(){ $('#supersized').each(function(){ $(this).css('width', $(this).parent().width()-100); }) } </script> sam
Вы бы css пример работы, если бы это былоwidth:90%; margin-right:-100px; sam
@ sam: если это так, просто добавьтеright: 100px...
с верхним примером, это будет работать, если элементposition:absolute; top:0; left:0; sam
Я думаю, что это не так
106

calc выражение, это не трудно подражать с JQuery:

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

Гораздо проще позволить jQuery обрабатывать относительные вычисления, чем делать это самостоятельно.

Просто если другие люди занимаются форматированием, не должно быть пробела между "=" и значение. Так-= 100px не сработает, должно быть-=100px.
Это работает, когда окно изменилось?
У этого подхода есть небольшая проблема. Когда я изменяю ширину страницы, ширина#yourEl не меняется, это постоянно.
@odiszapc добавить$(window).resize(function() { /* put the jquery calc code here */ }); поэтому он автоматически вычислит ширину при изменении размера окна.

Похожие вопросы