Skip to content

Instantly share code, notes, and snippets.

@bgaeddert
Created May 26, 2015 01:19
Show Gist options
  • Save bgaeddert/d2552bb69486965f3d5b to your computer and use it in GitHub Desktop.
Save bgaeddert/d2552bb69486965f3d5b to your computer and use it in GitHub Desktop.
Foundation Zurb detect break point change
function onBreakPointChange(breakPoint){
// Put code here to run on any break point change.
// Ex. large to medium and medium to large and small to medium...
if (matchMedia(Foundation.media_queries['small']).matches){
// Put code here to run when page changes to small
}
if (matchMedia(Foundation.media_queries['medium']).matches){
// Put code here to run when page changes to medium
}
if (matchMedia(Foundation.media_queries['large']).matches){
// Put code here to run when page changes to large
}
if (matchMedia(Foundation.media_queries['xlarge']).matches){
// Put code here to run when page changes to xlarge
}
}
var lastBreakPoint = null;
$(window).on("resize",function() {
var currentBreakPoint = null;
if (matchMedia(Foundation.media_queries['small']).matches){
currentBreakPoint = 'small';
}
if (matchMedia(Foundation.media_queries['medium']).matches){
currentBreakPoint = 'medium';
}
if (matchMedia(Foundation.media_queries['large']).matches){
currentBreakPoint = 'large';
}
if (matchMedia(Foundation.media_queries['xlarge']).matches){
currentBreakPoint = 'xlarge';
}
if(lastBreakPoint != currentBreakPoint){
lastBreakPoint = currentBreakPoint;
onBreakPointChange(currentBreakPoint);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment