Как прописать условие, отталкиваясь от ширины окна браузера?

Question

[Space]

Нужно условие прописать, чтобы ширина колонок изменялась, если ширина сайта не меньше 590. И если ширина меньше 590, то ширина левой колонки равна 100%. Вот накинули код в прошлой ветке, но не рабочий. В чем может быть проблема?

<script>
    $(function () {
        var total_width = 600;

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


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

        $("#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%');
            }
        }
    });
</script>

Answer 1

[Vitaly Sivkov]

А где у вас вызывается функция getWindowWidth()?

Comments

[Space]

верно, нигде. Как тогда ее вызвать лучше?

[Vitaly Sivkov]

Повесьте ее на onresize:
window.addEventListener('resize', getWindowWidth)

[Vitaly Sivkov]

Ну или таким образом, раз вы используете jQuery:
$(window).resize(getWindowWidth)

[Vitaly Sivkov]

Добавляйте в любое место в блоке

$(function () {
...
});

[Space]

Vitaly Sivkov: Если на body не повешаю onresize="getWindowWidth()" - работать не будет. Но есть две проблемы - в логах выводит, Что не определено getWindowWidth
и
пока ресайз окна не сделаешь - код не работает.

[Vitaly Sivkov]

Полный пример кода:

<script>
    $(function () {
        var total_width = 600;

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

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

        $("#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%');
            }
        }
    });
</script>

[Space]

Vitaly Sivkov: Круто, Спасибо.

Answer 2

[Андрей Козлов]

А как насчет @media? Ведь нужно же отталкиваться только от 590, так? Значит, и городить функции не обязательно)

Comments

[Space]

а мне нужно, чтобы код не исполнялся, если меньше. Потому что я прописывал min-width - но ничто это не останавливает =)