Повторяющиеся медиа-запросы в jQuery

339

30 сентября 2017, 22:17

Есть скрипт, который выполняется при разрешении окна 992px и меньше. Но дело в том, что, например, если разрешение окна 1200, а затем мы сжали браузер до 900, то этот скрипт не выполнится, нужно перезагружать страницу.

Как сделать так, чтобы проверка делалась постоянно (например как в медиа-запросах CSS)? То есть, чтобы можно было сжимать-разжимать страницу и скрипт постоянно выполнялся

Скрипт:

    jQuery(document).ready(function() {
    if (window.matchMedia('(max-width: 992px)').matches) {
        if (location.pathname == '/') {
            jQuery('.page-content').css('display', 'none');
        }
        if (location.pathname == '/catalog/') {
            jQuery('.page-content, #description_catalog').insertAfter('.bx_catalog_tile');
        }
    }
})

Answer 1

Вынесите всю проверку в отдельную функцию и вызывайте ее как при открытии страницы, так и при ресайзе окна:

$(document).ready(function() {
  checkMedia(); // запускаем при открытии страницы
  $(window).on('resize', function() { // запускаем при каждом ресайзе окна
    checkMedia();
  });
  function checkMedia() {
    if (window.matchMedia('(max-width: 992px)').matches) {
      if (location.pathname == '/') {
        jQuery('.page-content').css('display', 'none');
      }
      if (location.pathname == '/catalog/') {
        jQuery('.page-content, #description_catalog').insertAfter('.bx_catalog_tile');
      }
    }
  }
});