Преобразование .width() в px в % в jQuery для добавленных меток Bootstrap во время жидкости

В настоящее время у меня есть:

jquery

$(document).ready(function () { 
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var wide = $(this).width(), /* create a variable that holds the width of the form */
            label = $(this).prev('.add-on').width(); /* create another variable that holds the width of the previous label */
        $(this).width( wide - label ); /* subtract the label width from the input width and apply it in px */
    });
});

HTML

<div class="input-prepend">
    <span class="add-on">Location</span>
    <input name="ctl00$ContentPlaceHolder1$tbLocation" type="text" id="tbLocation" class="span12 span-fix" placeholder="Location" style="width: 97.04668304668304%; ">
</div>

Скрипт, показывающий проблему: http://jsfiddle.net/SuguM/

Однако это применяет новую ширину в px, и я использую гибкий макет, и мне нужно, чтобы это снова было в процентах.

Есть ли способ преобразовать px в %?


javascript jquery css units-of-measurement math
person Reuben    schedule 11.09.2012    source источник
comment
посмотрите на externalWidth, ширина не учитывает границы и тому подобное (IIRC)   -  person CaffGeek    schedule 11.09.2012

Ответы (4)


arrow_upward
2
arrow_downward

На самом деле вы опускаете заполнение в своем расчете. Я думаю, что этот код поможет вам.

ИЗМЕНИТЬ:

Это код для firefox:

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth();
        /* create another variable that holds the width of the previous label */
        $(this).width( (1-(label + $(this).outerWidth() - $(this).width())/$(this).parent().width()) *100 + "%" );
    });
});

А это код для хрома:

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth(); 
        /* create another variable that holds the width of the previous label */
        $(this).css("width", (1-(label)/$(this).parent().width()) *100 + "%" );
    });
});​

Для chrome вы должны установить свойство css, если вы используете метод ширины, когда вы проверяете свойство ширины css, значение свойства не равно рассчитанному значению.

Пример на jsFiddle здесь.

Здесь есть jsFiddle с двумя реализациями. Теперь вам просто нужно обнаружить браузер.

person Charles Jourdan    schedule 11.09.2012
comment
это тоже близко! хотя это не работает полностью .. даже в вашей скрипке! - person Reuben; 11.09.2012
comment
каким навигатором пользуетесь? Я предполагаю, что есть небольшая маржа на туго. Другой вопрос. Вы хотите то же самое для высоты? - person Charles Jourdan; 12.09.2012
comment
Что вы имеете в виду под навигатором? угадай браузер? (хром для Mac) да поле справа :( нет! высота не нужна :) - person Reuben; 12.09.2012
comment
Хорошо, вы правы, на хроме это не работает. Добро пожаловать в веб-разработку -_- - person Charles Jourdan; 12.09.2012
comment
Задачи на вычисление ширины. В chrome реальная ширина div не равна свойству css, а для firefox это так. - person Charles Jourdan; 12.09.2012
comment
КЛАССНО! Спасибо :) Это нужно серьезно добавить в бутстрап, это решает проблему добавления меток для гибких макетов! УРА! - person Reuben; 12.09.2012

arrow_upward
0
arrow_downward

Это берет ширину родителя и просто вычисляет процент.

$(this).width((wide - label)/$(this).parent().width()*100+'%');
person qw3n    schedule 11.09.2012
comment
Итак, похоже, что это близко. Это оставляет меня с тем же размером (шириной) формы ввода, как если бы у меня вообще не было никакого jquery.. (почти как если бы я потерял первую половину кода. - person Reuben; 11.09.2012
comment
@Reuben Это странно, мне трудно визуализировать ваш HTML, поэтому я не могу сказать вам, что именно происходит. Вы можете зарегистрировать значения родительского элемента, расширенной метки и конечного процента, чтобы увидеть, имеют ли они смысл. Или, если они этого не сделают, это может сказать вам, что происходит не так. - person qw3n; 11.09.2012
comment
@Reuben, вот jsfiddle моих тестов jsfiddle.net/CC3pm. Насколько я могу судить, ширина в этом случае изменяется от ~98% до ~78%. Это основано на том, что я задаю произвольную ширину 300 для содержащего div. Возможно, что если ширина содержащего div достаточно велика, может показаться, что изменений нет. - person qw3n; 11.09.2012
comment
Я использую гибкую компоновку бутстрапа Twitter, если это поможет? - person Reuben; 11.09.2012
comment
@Рубен, это то, что ты ищешь? jsfiddle.net/SuguM/5? Я не уверен, почему вам нужно, чтобы это было в процентах. Поскольку вы рассчитываете на лету, это означает, что после загрузки страницы вы получаете ширину в зависимости от размера страницы, поэтому я не уверен, как помогает использование процента. Кроме того, если вы измените размер позже, тот факт, что ширина метки указана в пикселях, означает, что вам все равно придется пересчитывать ее каждый раз. - person qw3n; 12.09.2012
comment
Когда я смотрю на это (хром на Mac), поле формы все еще находится за пределами черной рамки, оно должно соответствовать только этому. - person Reuben; 12.09.2012

arrow_upward
0
arrow_downward

Основано на моем предыдущем сообщении.

var getPercent = function(elem) {
    var elemName = elem.attr("id"),
        width = elem.width(),
        parentWidth = elem.offsetParent().width(),
        percent = Math.round(100 * width / parentWidth);
    return percent;
};
person yckart    schedule 12.09.2012

arrow_upward
-1
arrow_downward

Это вычисляет процент со всем документом:

$(this).width((wide - label) * 100 / $(document).width()+'%');
person zeta    schedule 11.09.2012
comment
Я действительно не ищу% документа:/ - person Reuben; 11.09.2012