@ruslite

Как получить width в jquery?

В данном коде делаю ресайз двух контейнеров, но здесь ширина измеряется в px. У меня изначально в стилях прописано в процентах, и мне нужно, чтобы ширина все время изменялась в процентах. Как быть?
$(function () {
        var total_width = 600;

        $("#col-left").resizable({
            grid: [1, 10000]
        }).bind( "resize", resize_other);

        function resize_other(event, ui) {
            var width = $("#col-left").width();
            var widthbigcon = $("#big-container").width();

            $('#col-right').css('width', (widthbigcon - width));
        }
    });

Использовалось Jquery UI.
  • Вопрос задан
  • 431 просмотр
Решения вопроса 1
@IoannGrozny
Front-end разработчик
Выражение в коде того, что написал kn1ght_t
$(function () {
        var total_width = 600;

        $("#col-left").resizable({
            grid: [1, 10000]
        }).bind( "resize", resize_other);

        function resize_other(event, ui) {
            var width = $("#col-left").outerWidth(),
                widthbigcon = $("#big-container").outerWidth(),
                widthPercent = 100*width/widthbigcon,
                widthRightPercent = 100 - widthPercent;

            $('#col-left').css('width', (widthPercent + '%'));
            $('#col-right').css('width', (widthRightPercent + '%'));
        }
    });


По-поводу условия, о котором спросили в комментариях, я бы сделал так:
getWindowWidth();
$(window).resize(getWindowWidth);

function getWindowWidth() {
  var bodyWidth = $('body').outerWidth();

  
    if (bodyWidth <= 590) {
        $('body').removeClass('wide');
    } else {
        $('body').addClass('wide');
    }
    // здесь необходимо выполнить функцию resize_other, на случай, если окно
    // изменит свою ширину, в результате ресайза юзером.
    resize_other();
}

Тогда функция с условием будет выглядеть так:
$(function () {
        var total_width = 600;

        /* код из предыдущего блока вставить сюда =) */

        $("#col-left").resizable({
            grid: [1, 10000]
        }).bind( "resize", resize_other);

        function resize_other(event, ui) {
          if($('body').hasClass('wide')) {
            var width = $("#col-left").outerWidth(),
                widthbigcon = $("#big-container").outerWidth(),
                widthPercent = 100*width/widthbigcon,
                widthRightPercent = 100 - widthPercent;

            $('#col-left').css('width', (widthPercent + '%'));
            $('#col-right').css('width', (widthRightPercent + '%'));
          } else {
            $('#col-left').css('width', '100%');
          }
        }
    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
kn1ght_t
@kn1ght_t
делить на ширину родителя, умноженную на 100
и знак процентов дописывать
Ответ написан
Комментировать
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Можно читать и менять прямо в стилях. Там точно в процентах.

document.styleSheets[{stylesheet number}].cssRules[{rule number}].style.width = "40%";


P.S. Думаю скрипт для поиска {stylesheet number} и {rule number} не составит проблем.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы