Сделать мой JS отзывчивым?

Question

Сделать мой JS отзывчивым?

0

Исходный код выглядит следующим образом:

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

Я пытаюсь сделать этот код отзывчивым, чтобы значения столбца и строки менялись в зависимости от размера экрана. С этой целью я реализовал это.

$(document).ready(function () {
    if ($(window).width() > 100 && $(window).width() < 200) {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 2,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
    else {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 3,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };

});

Значения, на которых я сосредоточен, - это "столбцы" и "строки". По какой-то причине добавление условий ширины min-max полностью отключает функцию.

Как мне изменить значения этой функции на основе размера экрана?

Jason Chen 15 дек. 2013, в 23:15

Источник

0

если вы хотите , чтобы сделать эти изменения на resize вы должны завернуть , if else в $(window).rezise(function(){ ... });
Spokey 15 дек. 2013, в 22:19

Теги:

javascript

jquery

2 ответа

0

if ($(window).width() > 100 && $(window).width() < 200) {
    $('#myDeepMenu').deepMenu({
        "tileW": 64,
        "tileH": 100,
        "columns": 2,
        "rows": 2,
        "mark-type": "top-left",
        "mark-color": "#A1A1A1"
    });
};  <----------------------- Semicolon in error?

Mark 15 дек. 2013, в 19:42

Ещё вопросы

если вы хотите , чтобы сделать эти изменения на resize вы должны завернуть , if else в $(window).rezise(function(){ ... });

Paul Redmond · Accepted Answer · 2013-12-15T20-26-00.000Z

Вам нужна функция для получения новых измерений всякий раз, когда размер изменяется:

var h = $(window).height(), w = $(window).width();
$(window).resize(function(){

   var nh = $(window).height(), nw = $(window).width();
   h = nh; w = nw;
   if nw > 100 && nw < 200) {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 2,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
    else {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 3,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
});

Это, кажется, не работает, хотя я уверен, что это должно. Я просматриваю это прямо сейчас, чтобы увидеть, есть ли какие-либо ошибки в синтаксисе.
Вы получили это на работу? Если нет, вы можете добавить скрипку со всеми необходимыми ресурсами.
Понял. jsfiddle.net/T5CqA - это ссылка на мой JSFiddle. Предполагается, что включены изображения, но для целей тестирования я их не включал. Главное, к чему я пытаюсь добраться, это то, что часть JS «столбцы» и «строки» определяет порядок расположения элементов. Я хочу, чтобы эти значения изменялись в зависимости от ширины браузера, чтобы они не переполнялись. Поэтому я изменяю значение столбца с 2 на 3. Спасибо за помощь.
Чтобы уточнить, когда вы нажимаете «Рабочий стол» или «Ноутбук», появляется меню значков. У меня проблемы с тем, чтобы заставить эти пункты меню изменять настройки строк и столбцов в зависимости от ширины браузера.