Используем медиа запросы с помощью JavaScript » Заказать шаблон для DLE

Используем медиа запросы с помощью JavaScript

Недавно, выполняя очередной заказ по разработке шаблона, мне понадобилось использовать Coin Slider. Слайдер этот обладает очень интересным эффектом, при котором картинка и все содержимое слайда исчезает постепенно как бы трансформируясь в новый слайд по частям. Мне этот эффект очень понравился.

Проблема возникла, когда я попытался использовать его в адаптивном шаблоне. Медиа запросы через css меняют размер контента и всей информации, но размер слайдера имеет строгие размеры в пикселях, которые меняются через настройки скрипта и при уменьшении размера окна сам слайдер не меняет своих размеров. Слайдер оказался абсолютно не рассчитан на адаптивность.

На помощь приходит метод windows.matchmedia, который передает строку запроса идентичную той, что используется в css:

var mql = window.matchMedia('all and (max-width: 480px)');

Теперь попробуем обработать условие, когда размер окна больше 480px или равное и меньше.

var mql = window.matchMedia('all and (max-width: 480px)');
if (mql.matches) {
    // размер окна 480px или меньше
} else {
    // нет, размер окна более 480px 
}

Сейчас проверяем, если разрешение окна соответствует условию то выполняем код или нет.

matchMedia и изменение размера, используя AddListener

Итак, как нам использовать предыдущее условие, но что б при достижении заданного размера окна условие срабатывало динамически, т.е без обновления окна браузера?

var handleMatchMedia = function (mediaQuery) {
        if (mediaQuery.matches) {
            // если менее 480px или равное, то выполняется код между скобок 
        } else {
            // обратное условие, т.е если более 480px
        }
    },
    mql = window.matchMedia('all and (max-width: 480px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia); // запускается каждый раз, когда заданное разрешение медиа запроса достигнуто

Прежде всего мы создали функцию, которая будет обрабатывать matchMedia (handleMatchMedia). После того как задали условие, мы запускаем функцию каждый раз, когда разрешение указанное в условии медиа запроса достигнуто или наоборот еще не достигнуто.

Теперь, при изменении размера экрана браузера, условие будет работать на лету без обновления страницы.

Так-как мне нужно было изменить размер слайдера с помощью строк в скрипте я прописал:

   if (mediaQuery.matches) {
$('#coin-slider').coinslider({ width: 1065, height: 290 });
        } else {
            $('#coin-slider').coinslider({ width: 1205, height: 356 });
        }

Данный метод показывает, что возможно обрабатывать медиа запросы и управлять контентом или скриптами с помощью jаvascript без участия css.