Menu icon Foundation
Foundation 6 JavaScript Media Queries

I know Foundation 6 allows for Media Queries (Foundation 6 Media Query Docs).

I'm curious if there is a way/example of how to use them like you could in Foundation 5 (Foundation 5 Media Query Docs)?

For example, I want to only trigger a click function if it's only on the small screen, if it's not on a small screen return false. Foundation.utils.is_small_only(); was possible on Foundation 5 but I'm not seeing anything like that with Foundation 6. 

Any help would be great! 

Here is a jsFiddle of some code I'm using: https://jsfiddle.net/qj6v66c7/2/ - issue is when I hit the "medium" and up breakpoints the "return false;" doesn't actually work.

I also have the same issue when toggling classes on the selector. For example: when the media query hits the "medium" and up breakpoints - the new class will go away (.removeClass is being applied) but for some reason my click binding that toggles the UL still works with the class that has disappeared. Very odd. 

mediaqueriesjavascriptsmallsmallonlysitesjquery

I know Foundation 6 allows for Media Queries (Foundation 6 Media Query Docs).

I'm curious if there is a way/example of how to use them like you could in Foundation 5 (Foundation 5 Media Query Docs)?

For example, I want to only trigger a click function if it's only on the small screen, if it's not on a small screen return false. Foundation.utils.is_small_only(); was possible on Foundation 5 but I'm not seeing anything like that with Foundation 6. 

Any help would be great! 

Here is a jsFiddle of some code I'm using: https://jsfiddle.net/qj6v66c7/2/ - issue is when I hit the "medium" and up breakpoints the "return false;" doesn't actually work.

I also have the same issue when toggling classes on the selector. For example: when the media query hits the "medium" and up breakpoints - the new class will go away (.removeClass is being applied) but for some reason my click binding that toggles the UL still works with the class that has disappeared. Very odd. 

Rafi Benkual almost 3 years ago

Hi Brian,

Have you tried 'medium only'

Bryan Lewis almost 3 years ago

Hey Rafi! Thanks for your assistance! I found a work around with additional markup but... Are you saying something similar to the following should be possible in JS? 

if (Foundation.MediaQuery.atLeast('small only')) {
//code here
}