Menu icon Foundation
javascript function only on small

Hi there,

I've got a function to hide the responsive menu when clicked on a menu link.

Now the problem is that the menu is also hided on click when it's not on small grid.

I already found the javascript meida queries to let the function only fire qhen it's on small grid.

Something like this:

if(isSmall()) {
  $(document).on("click", "#menu li", function () {
    $('#menu').hide();
  });
}

 

Now the problem is: I don't really understand how to write a javascript function to check if the grid is small or not.

I already tried this:

isSmall = function() {
  return matchMedia(Foundation.media_queries['small']).matches;				
};

But I'm getting the following error:

Cannot read property 'small' of undefined

 

Any ideas?

Thanks!

media_queriesjavascript

Hi there,

I've got a function to hide the responsive menu when clicked on a menu link.

Now the problem is that the menu is also hided on click when it's not on small grid.

I already found the javascript meida queries to let the function only fire qhen it's on small grid.

Something like this:

if(isSmall()) {
  $(document).on("click", "#menu li", function () {
    $('#menu').hide();
  });
}

 

Now the problem is: I don't really understand how to write a javascript function to check if the grid is small or not.

I already tried this:

isSmall = function() {
  return matchMedia(Foundation.media_queries['small']).matches;				
};

But I'm getting the following error:

Cannot read property 'small' of undefined

 

Any ideas?

Thanks!

This post has been closed. No new replies can be added.