CODEWITHSUNDEEP
javascripthtmlcssmedia-queries
Alex Rummel
Alex Rummel

Reputation: 152

JavaScript - Event listener with window.matchMedia not triggering

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 becomes 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.

Upvotes: 6

Views: 7451

Answers (4)

mrak
mrak

Reputation: 2906

The addListener callback is deprecated and the addEventListener is recommended in the documentation (https://developer.mozilla.org/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.org/en-US/docs/Web/API/MediaQueryList/change_event

Upvotes: 1

Ahmed Mansour
Ahmed Mansour

Reputation: 590

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.

Upvotes: 0

Alex Rummel
Alex Rummel

Reputation: 152

Using addListener instead of addEventListener fixed the problem.

Upvotes: 3

Martin Homola
Martin Homola

Reputation: 245

You have to check it every time, when window is resized.

window.addEventListener('resize', function(){
  mediaQueryCheck(mobileQuery);
});

Upvotes: -1

Related Questions