Breakpoints.js is a project of the hackers and designers at XOXCO. Email us to find out how we can help with your project.

Demo

Resize your browser window now and watch events in the box below.

Use only largest available breakpoint

Active Breakpoints

1024

768

480

320

Event Log:

Breakpoints.js

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

Get it from Github

View Demo

Created by XOXCO

Instructions

$(window).setBreakpoints({
// use only largest available vs use all available
    distinct: true, 
// array of widths in pixels where breakpoints
// should be triggered
    breakpoints: [
        320,
        480,
        768,
        1024
    ] 
});     

$(window).bind('enterBreakpoint320',function() {
    ...
});

$(window).bind('exitBreakpoint320',function() {
    ...
});

$(window).bind('enterBreakpoint768',function() {
    ...
});

$(window).bind('exitBreakpoint768',function() {
    ...
});


$(window).bind('enterBreakpoint1024',function() {
    ...
});

$(window).bind('exitBreakpoint1024',function() {
    ...
});