Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.09.2016, 13:43
Новичок на форуме
Отправить личное сообщение для Ezhuroff Посмотреть профиль Найти все сообщения от Ezhuroff
 
Регистрация: 29.07.2016
Сообщений: 5

Адаптация, медиазапросы
Помогите, пожалуйста, никак не могу сообразить, что не так. Точнее, есть некоторые подозрения, что не так, но как сделать правильно, не догоняю.
Есть код, который при увеличении разрешения до 1024px выдергивает панель поиска из сворачивающегося меню и размещает в видимой части панели навигации:

function monitors(mediaQuery1, mediaQuery2, mediaQuery3, mediaQuery4) {
  	var panel = document.getElementsByTagName("form"); // получаем блок с панелью поиска
  	var subMenu = document.getElementsByClassName("submenu"); // перед этим элементом необходимо будет вставить панель поиска
  	var parent = document.getElementById("accordion"); // родитель обоих элементов
  	  	
	   		if (mediaQuery1.matches) {
	   			// при ширине 1024 добавляем панели css-свойства и вставляем перед элементом subMenu
  				panel[0].style.cssText = "margin: 8px 1.5rem 0 0; \ width: 60vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
  				parent.insertBefore(panel[0], subMenu[0].parentNode);
  			} else if (mediaQuery2.matches) {
  				// при ширине 1280...
  				panel[0].style.cssText = "margin: 10px 10rem 0 0; \ width: 40vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
  				parent.insertBefore(panel[0], subMenu[0].parentNode);
  			} else if (mediaQuery3.matches) {
  				// при ширине 1536...
  				panel[0].style.cssText = "margin: 12px 10rem 0 0; \ width: 40vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
  				parent.insertBefore(panel[0], subMenu[0].parentNode);
  			} else if (mediaQuery4.matches) {
  				// при ширине 1920...
  				panel[0].style.cssText = "margin: 20px 10rem 0 0; \ width: 70vw; \ position: relative; \ float: right; \ display: inline-block; \ ";
  				parent.insertBefore(panel[0], subMenu[0].parentNode);
  			}
	
}

  	smallDesktop = window.matchMedia("screen and (min-width: 1024px)");
  	notebook = window.matchMedia("screen and (min-width: 1280px)");
  	medium = window.matchMedia("screen and (min-width: 1536px)");
  	large = window.matchMedia("screen and (min-width: 1920px)");

  	monitors(smallDesktop, notebook, medium, large);


И вот оно чёт как-т не работает). Срабатывает только первый if с mediaQuery1.matches. Все остальные параметры функции в консоли = undefined. Что я делаю не так?
Заранее спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Адаптация сайта через JS korih Общие вопросы Javascript 6 07.06.2016 15:16
адаптация нового окна под игру... wlad Элементы интерфейса 0 15.01.2016 12:58
Адаптация скрипта на старой версии jQuery к новой. Vladislav0140 jQuery 3 22.12.2015 17:53
не работает адаптация на мобильном майрбек95 Элементы интерфейса 8 10.04.2015 00:18
Адаптация кода StaREViL Internet Explorer 4 03.09.2009 17:55