admin管理员组文章数量:1325532
I've panned through countless solutions to this problem and none of them have fixed my issue. I very simply have a navigation bar, which, when on a mobile browser, disappears and bees replaced with a button, whose function is to show and hide the navigation bar.
Now, I want my listener to, when the window is shrunk, show the button and hide the navigation bar. When the window is expanded, the button should be hidden and the navigation bar should be shown. The button is working as it should be, since the media query doesn't affect it. My listener appears to not run at all, except when the page is reloaded.
My script is contained inside of a PHP header which is included at the beginning of all my pages. Here's what I've got:
Media Query Listener (contained in header.php code)
// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
var content = document.getElementById("navigation");
if (inputQuery.matches) {
// it matches
content.style.display = "none";
} else {
// it does not match
content.style.display = "block";
}
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag
The element #navigation
is a div element containing the navigation bar. I will provide any other relevant code, if necessary.
I've panned through countless solutions to this problem and none of them have fixed my issue. I very simply have a navigation bar, which, when on a mobile browser, disappears and bees replaced with a button, whose function is to show and hide the navigation bar.
Now, I want my listener to, when the window is shrunk, show the button and hide the navigation bar. When the window is expanded, the button should be hidden and the navigation bar should be shown. The button is working as it should be, since the media query doesn't affect it. My listener appears to not run at all, except when the page is reloaded.
My script is contained inside of a PHP header which is included at the beginning of all my pages. Here's what I've got:
Media Query Listener (contained in header.php code)
// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
var content = document.getElementById("navigation");
if (inputQuery.matches) {
// it matches
content.style.display = "none";
} else {
// it does not match
content.style.display = "block";
}
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag
The element #navigation
is a div element containing the navigation bar. I will provide any other relevant code, if necessary.
- The interface returned by matchMedia only calls it's listener when the state of the media query changes. It's unclear what you mean by window "shrunk" or "expanded" on a mobile browser. The screen width isn't going to change as you typically can't resize a mobile browser window. – Jared Smith Commented Nov 12, 2018 at 20:52
-
2
you need to use
addListener
instead ofaddEventListener
– user7148391 Commented Nov 12, 2018 at 20:54 - I may be missing some detail in your description of what you are trying to acplish but why aren't you just using css media queries for this? – benvc Commented Nov 12, 2018 at 20:55
- @benvc CSS media queries would solve the problem as described but OP may have other reasons to do it in JS – Jared Smith Commented Nov 12, 2018 at 20:56
- 1 I am using CSS media queries, although I need to use JS in conjunction with these media queries. The media queries are overriden by the usage of the button, thus if I pressed the button to hide my navbar in the mobile layout, it will remain hidden even when I reexpand the window. – Alex Rummel Commented Nov 12, 2018 at 21:00
4 Answers
Reset to default 3Using addListener
instead of addEventListener
fixed the problem.
The addListener
callback is deprecated and the addEventListener
is remended in the documentation (https://developer.mozilla/en-US/docs/Web/API/MediaQueryList/addListener):
const mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mobileQuery.addEventListener("change", mediaQueryCheck);
// or explicit
// mobileQuery.addEventListener("change", e => mediaQueryCheck(e));
The relevant event is the "change" event: https://developer.mozilla/en-US/docs/Web/API/MediaQueryList/change_event
for whoever needs another solution:
you may use this function:
function getWidth() {
var maxWidth = Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
console.log(maxWidth); // for testing only
if(maxWidth === 776){
//do sth
}
if(maxWidth === 992){
//do sth
}
return maxWidth;
}
window.addEventListener("resize", getWidth);
now you have the width of the screen all the time
this is just another way of doing things... you may wanna use whatever serves your purpose.
You have to check it every time, when window is resized.
window.addEventListener('resize', function(){
mediaQueryCheck(mobileQuery);
});
本文标签: htmlJavaScriptEvent listener with windowmatchMedia not triggeringStack Overflow
版权声明:本文标题:html - JavaScript - Event listener with window.matchMedia not triggering - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742194110a2430756.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论