Запуск jquery с медиа-запросами css

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

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

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

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

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


conditional-statements jquery window media-queries
person JCHASE11    schedule 23.06.2011    source источник

Ответы (3)


arrow_upward
17
arrow_downward

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

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

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

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

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

if ( $("#navigation li").css("float") === "none") {
person Pointy    schedule 23.06.2011

arrow_upward
14
arrow_downward

Использовать 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 запускается ТАКЖЕ при изменении размера окна браузера, а не только при первоначальной загрузке документа!

person Sebastian    schedule 22.03.2013
comment
не работает, всегда переходите к первому, даже уменьшайте размер экрана до 767 пикселей - person Kishan Vasoya; 24.01.2018

arrow_upward
0
arrow_downward

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

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

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

person Putuko    schedule 26.02.2015