Запуск 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
(улучшения и идеи приветствуются;)