breakpoint-change.js

A JavaScript library for receiving callbacks when stylesheet-defined breakpoints change.

Installation

Manually

Grab the latest breakpoint-change.js or breakpoint-change.min.js and include in your project.

Bower

bower install breakpoint-change.js --save

Usage

Declare a selector for each breakpoint inside a media query in the stylesheet.

@media screen and (max-width: 499px) {
  .breakpoint #phone {}
}
@media screen and (min-width: 500px) {
  .breakpoint .tablet {}
}
@media screen and (min-width: 900px) {
  .breakpoint .desktop {}
}

The first part of the selector .breakpoint can be configured to any valid css selector.

The last part #phone|.tablet|.desktopdefines the name of the breakpoint. If the last part is a class, this is a regular breakpoint. If the last part is an id, this will be used as the default breakpoint. Only one default breakpoint is allowed.

If a default breakpoint is supplied, the callbacks will only be called during initialization if the currently matching breakpoint is not the default.

The order of the media queries are extremely important as the last matching query is considered the current.

var breakpointChange = new BreakpointChange(window);
breakpointChange.on(function (breakpoint, oldBreakpoint) {
    // breakpoint will be the name previously defined in the stylesheet.
    // The class/id prefix is removed, e.g. for a window width of 300px,
    // breakpoint = 'phone'
});
breakpointChange.init();

If you need to change the first part of the selector, you can pass in an additional argument to the constructor:

var breakpointChange = new BreakpointChange(window, '#awesome .breakpoints');

The selectors in the stylesheets should then be changed to:

#awesome .breakpoints #phone {}

• NOTE: Internet Explorer might reorder combined selectors, e.g. .breakpoint.change, causing the selector parser to fail.

To listen for changes in specific breakpoints, the onEnter and onLeave methods can be used instead.

breakpointChange.onEnter('phone', function (breakpoint) {
    // breakpoint will be the name of the breakpoint that we entered, 'phone' in this case.
});
breakpointChange.onLeave('phone', function (breakpoint) {
    // breakpoint will be the name of the breakpoint that we left, 'phone' in this case.
});

To remove a callback use the corresponding off methods.

breakpointChange.off(callback);
breakpointChange.offEnter(name, callback);
breakpointChange.offLeave(name, callback);

Support

Please open an issue for support.