Stop JS from running at certain viewport size?

Question

I would like my "mega menu" JS to only run at full screen width and for a Responsive Menu (from module) to load at any lower screen width. Currently at lower screen width the responsive menu seems to work correctly, but the JS for the mega menu is still running and so is interfering with the responsive menu. I have set the option for CSS selectors to be removed in the Responsive Menu module, but the id for the menu does not change in the HTML naturally and so the mega menu is still using that id. (Is that the problem perhaps?) How can I get the JS to only run at full screen width? Thank you!

    $('#subnav').dcMegaMenu({effect: 'slide', speed: 'slow', rowItems: '5', fullWidth: 'true' });

Ah! I completely forgot that I had this running elsewhere with the media queries package so it was easy to implement and it works great! Thank you. — jcharlesberry, Aug 06 '15 at 17:36

score 0 · Answer 1 · answered Aug 07 '15 at 20:33

One piece of javascript that we used as a check if it's a mobile display is this (using 640px wide as our 'mobile display'):

function IsMobileDisplay()
{
    if (document.all && !document.addEventListener)
        return false;

   var windowWidth = window.innerWidth || document.documentElement.clientWidth ||  document.body.clientWidth;
   return windowWidth <= 640 || navigator.userAgent.match(/iPad/i) != null;
}

Then in your case:

if (!IsMobileDisplay) 
{ 
   //do stuff 
}

Stop JS from running at certain viewport size?

1 Answers1