A simple plugin that allows you to easily execute code within a specific breakpoint. Option to display your breakpoint information in your window. Compatible with Zurb Foundation 5.0+ and 6.0+.
$(document).ready(function(){
var bp = new FoundationBreakpoints({ "dev": true });
$(document).ready(function(){
var bp = new FoundationBreakpoints({ "dev": true });
bp.small(function(){
$('body').css('background-color', '#BADCE8');
});
bp.medium(function(){
$('body').css('background-color', '#DCF2FA');
});
bp.largeUp(function(){
$('body').css('background-color', '#ffffff');
});
bp.smallUp(function(){
alert('I will only run once since the listener is set to false');
}, false);
bp.portrait(function(){
console.log('You probably can\'t view this message on mobile');
}, false);
});
});
When you instantiate the object you can pass the 'dev' option. Default is false, and true will display the helper class in lower left of screen.
var bp = new FoundationBreakpoints({ "dev": true });
The Object Methods take true/false after the function. Default is true, False will only execute the code once within the set breakpoint.
bp.large(function(){ alert('test'); }, false);