3

Адаптирую сайт магазина для мобильных устройств. При просмотре с десктопа подпункты выпадают (hover, absolute), а для мобильных клиентов решил сделать разъезжающиеся пункты и подпункты (пример на JsFiddle).

Вопрос следующий: как подключать jQuery-скрипт только при определенном разрешении? Как поставить условие бы при большом размере области просмотра срабатывал обычный css, а на мобильных появлялась jQuery-анимация?

Вот скрипт (больше по ссылке):

var $menu_with_children = $('.has_children > a');

$menu_with_children.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
        $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
    } else{
        $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
    }
});
2
  • Нужно что бы при определенных размерах области просмотра (например, больше 420px в ширину) ничего не менялось, а при меньше 420 подключался скрипт(css меняется медиа-запросами) 15 сен 2015 в 11:41
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 15 сен 2015 в 13:36

3 ответа 3

5

Есть как минимум две «ширины сайта» — ширина окна браузера и ширина документа (разница есть, например, если у пользователя появился скроллинг).

В jQuery $(window).width() и $(window).height() возвращают соответственно ширину и высоту области просмотра браузера.

Пользоваться ими можно, например, так

if ($(window).width() > 1280) {
  // Тут код для больших разрешений,
  // к примеру, с шириной окна с сайтом больше 1280 писелей
} else {
  // Тут код для маленьких экранов
}
3

Если необходимо, что бы условие срабатывало не только при инициализации скрипта, а и при изменении размера экрана, то нужно использовать обработчик. И проверять, как написал @installero, значение ширины экрана $(window).width():

$(window).on('resize', function () {
  if ($(window).width() > 1280) {
    // код для окна больше 1280 пикселей
  } else {
    // код для окна меньше 1280 пикселей
  }
});
2
if(($(window).width() > 1024)&&($(window).height() > 768)){
//что-то там...
} else {
//чего-то там...
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.