foundation-breakpoints v0.2.7

Zurb Foundation Breakpoints Helper plugin

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+.

Example usage

$(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);
    });

});

Options

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);

Demo

http://theblackbolt.github.io/foundation-breakpoints/