Запуск jquery с медиа-запросов CSS - PullRequest
Новая
       14

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

11 голосов
/ 24 июня 2011

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

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

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

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

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

Ответы [ 3 ]

17 голосов
/ 24 июня 2011

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

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

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

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

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

if ( $("#navigation li").css("float") === "none") {
14 голосов
/ 22 марта 2013

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

0 голосов
/ 26 февраля 2015

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

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

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

...