Menu icon Foundation
Foundation.MediaQuery not working

I'm trying to create some jQuery that targets only small screens and when I try using Foundation.MediaQuery.atLeast or Foundation.MediaQuery.get, I just get null values. For example,

console.log(Foundation.MediaQuery.get('medium'));

returns null.

My breakpoints are working in Sass and are set as follows:

$breakpoints: (
  small: 0,
  medium: 750px,
  large: 1024px,
  xlarge: 1400px,
  xxlarge: 1500px,
);
$breakpoint-classes: (small medium large xlarge xxlarge);

Any ideas as to why this isn't working?

media queriesjquery

I'm trying to create some jQuery that targets only small screens and when I try using Foundation.MediaQuery.atLeast or Foundation.MediaQuery.get, I just get null values. For example,

console.log(Foundation.MediaQuery.get('medium'));

returns null.

My breakpoints are working in Sass and are set as follows:

$breakpoints: (
  small: 0,
  medium: 750px,
  large: 1024px,
  xlarge: 1400px,
  xxlarge: 1500px,
);
$breakpoint-classes: (small medium large xlarge xxlarge);

Any ideas as to why this isn't working?

Matt Purland almost 3 years ago

This is probably because you've not yet initialised Foundation

AE almost 3 years ago

What does that mean? I'm using FoundationPress so I'm assuming that's already taken care of, but the docs say to put this above the closing body tag, so I did that.

<script>
  $(document).foundation();
</script>

Now I get these error messages in my console, and Foundation.MediaQuery.get('medium') still returns null.

Tried to initialize accordion-menu on an element that already has a Foundation plugin.foundation.js:459:13

Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.js:459:13

Matt Purland almost 3 years ago

Looks like you're now initialising Foundation twice?

AE almost 3 years ago

FoundationPress must initilaize it already somewhere. Any ideas what else could be causing the media query utilities to not work?