Как сделать выполнение скрипта только при определенном разрешении?

Question

[Елена]

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

$(('a[name=link]')).on('click', function() {
$('.main-nav').fadeOut();
$('.overlay').fadeOut();
});

Проблема в том, что меню у меня одно для декстопной и для мобильной версии (в мобильной отображение перестраивается средствами flexbox). Следовательно, по этой причине этот скрипт будет скрывать меню при клике по ссылке и не в мобильной версии тоже. Пробовала решить проблему следующим образом:

if(window.innerWidth < 450){
$(('a[name=link]')).on('click', function() {
$('.main-nav').fadeOut();
$('.overlay').fadeOut();
});
};

Скрипт выполняется, но с одним НО! При ресайзе обратно в декстоп меню так и не появляется. Пробовала добавлять что-то вроде:

if(window.innerWidth > 450){
$('.main-nav').fadeIn();
$('.overlay').fadeOut();
};

чтобы при обратном увеличении экрана меню снова появлялось. Работает, но тогда не работает первый скрипт, то есть if(window.innerWidth < 450).

Какие еще способы есть заставить работать эту часть кода при нужном разрешении так, чтобы при ресайзе обратно все становилось на свои места? Особенно это актуально при повороте экрана, потому что на смартфоне при повороте отрабатывает декстопная версия.

Answer 1

[mrxakerrus]

Мне кажется лучше для таких целей использовать CSS и media query, там тебе и разрешение изменять и ориентацию и форм-фактор

Comments

[Елена]

Медиазапросы то итак используются. А как с помощью одного css сделать скрытие меню при клике по ссылке? Если на css можно без js, то это решило бы проблему.

[mrxakerrus]

Создать checkbox, внутри поместить кнопку, создать link с правилом for На checkbox и управлять элементом через ~ в css, если более подробно нужно будет, то https://jsfiddle.net/9c6jsg8d/ специально написал, если нужно ПОДРОБНЕЕ все описать, то оставляй контакты свои для связи, либо через js если создавать, то через событие onclicked присвоить элементу класс с параметрами скрытия ну типа visibility:hidden, но лучше display:none(прям советую, потому что visibility используется для того чтобы из DOM дерева выпилить), не забудь только создать переменную с параметром скрыть элемент или нет, либо в ES6 вроде кажется появился способ добавить класс, а если он существует то уничтожает его, но в любом случае можно и без ES6 просто создать переменную, которая содержит в себе булево значение и показывает скрыт элемент или нет (имеет класс с параметрами display:none или нет)

[Елена]

mrxakerrus, спасибо за развернутый ответ. Попробую. Через checkbox не хотелось бы. Есть еще идея вынести скрипт к меню в отдельный файл, а уж его подключать через скрипт в head только на разрешениях меньше 450 px, потому что все, что с ресайзом и прописыванием условий для разрешений не работает при возвращении к исходному размеру экрана хоть через поворот экрана на смартфоне, хоть через ресайз окна браузера.

Через дописывание свойства или класса с display: none меню при клике по ссылке тоже пробовала. Также обратно не возвращается на свои места после ресайза. Так то само скрытие отлично работает, но не получается сделать его рабочим только и только при этом разрешении и никак иначе.

Answer 2

[Ankhena]

Проверяйте при ресайте тоже, а не только при загрузке
$(window).resize(function() {...})

Comments

[Елена]

Пробовала. При повороте экрана так и не возвращается на место меню. Исчезает и дальше только перезагружать страницу.

[Ankhena]

Елена,

Пробовала.

-> jsfiddle.net или ссылку

[Елена]

Ankhena, сейчас по новой все буду пробовать и выложу все результаты, если снова не получится. А так не сохранила ничего.

[Елена]

Ankhena, в общем, пробовала разные способы. Этот помог, но не так, как надо:

$(window).resize(function() {
  if(document.documentElement.clientWidth < 451) {
    $(('a[name=link]')).on('click', function() {
            $('.main-nav').fadeOut();
            $('.overlay-3').fadeOut();
    });
  }
  else {
     if(document.documentElement.clientWidth > 451) {
            $('.main-nav').css('display','block');
     } 
  }
});

В общем, при ресайзе удается свернутое меню вернуть обратно через display: block, но при клике, не смотря на то, что разрешение экрана уже больше 450, меню при клике все равно скрывается.

jsfiddle что-то недоступен пока.(

[Ankhena]

Елена,

jsfiddle что-то недоступен пока.(

любой другой аналог

Использую $(window).width(), всё равно же JQ.
Только сначала отдельно функцию, а потом ее вызов при ресайзе.

И разумно где-то поставить =
Ширина 451px конечно маловероятна, но тем не менее.