window.matchMedia ("(max-width: 1700px)"); не работает? - PullRequest
Новая
       61

window.matchMedia ("(max-width: 1700px)"); не работает?

1 голос
/ 23 мая 2019

Эй, друзья, я пытаюсь использовать window.matchMedia("(max-width: 1700px)"), чтобы добавить некоторые элементы в html, когда страница имеет размер 1700px или меньше. Прямо сейчас я просто пытаюсь проверить это с помощью функции оповещения «йо» на экране. Это работает не так хорошо, как другие вещи, которые я пытался изменить? Есть идеи?

https://jsfiddle.net/yat5ncmk/6/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;

x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
	num--;
	if(num > 0) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 4;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}
})

rightArrow.addEventListener('click', function() {
	num++;
	if(num <= 4) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 1;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}	
})

function adjustMenuDesign(width) {
    if (width.matches) { // If media query matches
	    alert('yo');
	} 
}

window.sr = ScrollReveal();

sr.reveal('.logo-wrap', {
	duration: 2000
});

sr.reveal('.w1', {
	duration: 2000,
	origin: 'bottom'
});

sr.reveal('.w2', {
	duration: 3000,
	origin: 'bottom'
});

sr.reveal('.w3', {
	duration: 4000,
	origin: 'bottom'
});

sr.reveal('.hours-line-left', {
	duration: 1000,
	origin: 'left',
	distance: '200px'
});

sr.reveal('.hours-line-right', {
	duration: 1000,
	origin: 'right',
	distance: '200px'
});

sr.reveal('.contact-line', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});

sr.reveal('.burrito', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.taco', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.guac', {
	duration: 1000,
	origin: 'right',
	distance: '250px'
});

sr.reveal('.nachos', {
	duration: 1000,
	origin: 'bottom',
	distance: '250px'
});

sr.reveal('.hot', {
	duration: 1000,
	origin: 'left',
	distance: '250px'
});

sr.reveal('.back-to-top', {
	duration: 1000,
	origin: 'bottom',
});

sr.reveal('.btp-arrow', {
	duration: 1500,
	origin: 'top',
	distance: '250px'
});

1 Ответ

1 голос
/ 23 мая 2019

Пара проблем .. 

x.addEventListener(adjustMenuDesign);

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

window.addEventListener("resize", adjustMenuDesign);

Также вы захотите снова выполнить запрос matchMedia при изменении размера, так что перемещение этого фрагмента кода в AdjustMenuDesign имело бы смысл здесь.

Ниже приведена рабочая скрипка с этими изменениями.

https://jsfiddle.net/veckopab/

...