Нещодавно, виконуючи чергове замовлення з розробки шаблону, мені знадобилося використовувати Coin Slider. Слайдер цей володіє дуже цікавим ефектом, при якому картинка і весь вміст слайда зникає поступово як би трансформуючись у новий слайд по частинах. Мені цей ефект дуже сподобався.
Проблема виникла, коли я спробував використовувати його в адаптивному шаблоні. Медіа запити через css змінюють розмір контенту і всієї інформації, але розмір слайдера має строгі розміри в пікселях, які змінюються через налаштування скрипта і при зменшенні розміру вікна сам слайдер не змінює своїх розмірів. Слайдер виявився абсолютно не розрахований на адаптивність.
На допомогу приходить метод windows.matchmedia, який передає рядок запиту ідентичну тій, що використовується в css:
var mql = window.matchMedia ( 'all and (max-width: 480px)');
Тепер спробуємо обробити умова, коли розмір вікна більше 480px або рівне і менше.
Зараз перевіряємо, якщо дозвіл вікна відповідає умові то виконуємо код чи ні.
matchMedia і зміна розміру, використовуючи AddListener
Отже, як нам використовувати попереднє умова, але що б при досягненні заданого розміру вікна умова спрацьовувало динамічно, тобто без відновлення вікна браузера?
Перш за все ми створили функцію, яка буде обробляти matchMedia (handleMatchMedia). Після того як поставили умову, ми запускаємо функцію кожен раз, коли дозвіл вказане в умові медіа запиту досягнуто або навпаки ще не досягнуто.
Тепер, при зміні розміру екрана браузера, умова буде працювати на льоту без оновлення сторінки.
Так-так мені потрібно було змінити розмір слайдера з допомогою рядків в скрипті я прописав:
Даний метод показує, що можливо обробляти медіа запити і управляти контентом або скриптами за допомогою j # 097; vascript без участі css.