Сделать JS реагировать на ширину экрана

Question

Сделать JS реагировать на ширину экрана

0

У меня возникают проблемы с тем, чтобы заставить JS отвечать на размер браузера. Чтобы дать представление о том, над чем я работаю, обновленный JS Fiddle можно найти по ссылке http://jsfiddle.net/T5CqA/1/.

Исходный код выглядит следующим образом. '$ (document).ready(function() {

            $('#myDeepMenu').deepMenu({"tileW":64,"tileH":100,
                                       "columns":2,"rows":2,
                                       "mark-type":"top-left",
                                       "mark-color":"#A1A1A1"});
        });

Когда вы нажимаете на значки (на данный момент нет значков) появляется несколько меню изображений. Расположение этих значков продиктовано частью "Строка" и "Колонка" Javascript. У меня возникают проблемы с изменением значений на основе изменения размера экрана. Я хочу, чтобы элементы colours и row были разными, чтобы они соответствовали размеру экрана.

Например, переход от одной строки и столбца к нескольким, когда экран становится меньше.

Jason Chen 18 дек. 2013, в 00:38

Источник

1

Я полагаю, вы должны расширить DeepMenu.js с помощью нового метода обновления. Может быть, у меня есть время завтра, чтобы решить что-то для вас. :)
Markus Kottländer 17 дек. 2013, в 23:32
1

Итак, пара вариантов. Вы можете прослушать событие изменения размера окна и пересчитать ваши значения: $(window).resize(function() { //whatever }); , Или вы можете посмотреть на медиа-запросы CSS и полностью обработать отзывчивость вне javascript.
S McCrohan 17 дек. 2013, в 23:33
0

Я не знал, что медиазапросы CSS работают со скриптами JS.
Jason Chen 18 дек. 2013, в 00:15
0

Может ли кто-нибудь продемонстрировать мне, как это будет работать с методом .resize?
Jason Chen 19 дек. 2013, в 05:19

Показать ещё 2 комментария

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Я полагаю, вы должны расширить DeepMenu.js с помощью нового метода обновления. Может быть, у меня есть время завтра, чтобы решить что-то для вас. :)
Итак, пара вариантов. Вы можете прослушать событие изменения размера окна и пересчитать ваши значения: $(window).resize(function() { //whatever }); , Или вы можете посмотреть на медиа-запросы CSS и полностью обработать отзывчивость вне javascript.
Я не знал, что медиазапросы CSS работают со скриптами JS.
Может ли кто-нибудь продемонстрировать мне, как это будет работать с методом .resize?

DrCord · Accepted Answer · 2013-12-17T20-36-00.000Z

Здесь модуль jQuery, который я хотел бы включить в сайты разработки, я работаю с изменением размера окна, чтобы я мог видеть значение в консоли и использовать возвращаемое значение из checkWidth() для выполнения вычислений.

jQuery(function($){

    //store the reference outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowSize = $window.width();

        return windowSize;
    }

    // Execute on load
    checkWidth();

    // Bind event listener to window resize
    $(window).resize(function(){
            //remove console.log from production version - useful for while in development
        console.log('checkWidth: ', checkWidth() + 'px' );
    });

});