Запуск jquery с запросами css media

Я использую css-медиа-запросы в моем проекте для создания сайта, который будет работать с любым размером экрана. Я ищу, чтобы запускать разностные функции jquery так же, как и с css.

Например, если размер браузера находится между 1000px и 1300px, я бы хотел вызвать следующую функцию:

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

НО, если размер браузера меньше 1000 пикселей, js остановит его обработку. Итак, и т.д.

Я не уверен, что это возможно, но, возможно, существует существующее решение или плагин, который создает разные js-среды на основе размеров окон браузера. Я предполагаю, что могу создать условные утверждения в некотором формате. Любые мысли?

Ответ 1

Библиотека Modernizr поддерживает прямые вызовы JavaScript, которые оценивают запросы к мультимедиа.

Если вы не хотите этого делать, у вас могут быть разные правила CSS, управляющие некоторым свойством скрытого элемента, и вы могли бы использовать ".css()" для проверки значения из jQuery. Другими словами, правило "шириной более 1000 пикселей" может установить скрытую <div> в "width: 1000px", и вы могли бы затем проверить

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

Здесь демонстрируется немой jsfiddle. Перетащите среднюю панель разделителя влево и вправо, чтобы увидеть, что код JavaScript (в таймере с интервалом) определяет изменение для эффективной "ширины" скрытого элемента.

Если вы ссылаетесь на отзывчивый дизайн, вы также можете инициировать существующее свойство элемента без добавления разметки в свой html, например

if ( $("#navigation li").css("float") === "none") {

Ответ 2

Использование Modernizr, как отметил Уокей, довольно просто.

Добавьте следующий javascript:

$(document).ready(function() {
    function doneResizing() {
        if(Modernizr.mq('screen and (min-width:768px)')) {
            // action for screen widths including and above 768 pixels 
        }
        else if(Modernizr.mq('screen and (max-width:767px)')) {
            // action for screen widths below 768 pixels 
        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

Таким образом, обнаружение Modernizr Mediaquery запускается ТАКЖЕ, когда вы изменяете размер окна браузера - не только при первоначальном загрузке документа!

Ответ 3

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

Вы можете определить свой собственный код в каждом состоянии ( "при входе в мобильное разрешение", "при выходе из рабочего стола" )... и там помещен ваш код.

Надежда может быть полезной для кого-то другого;)
https://github.com/carloscabo/MQBE
(улучшения и идеи приветствуются;)