jquery-breakpoint

by hejmartin

A simple way to use media queries in your jQuery javascripts!

127 Stars 14 Forks Last release: over 5 years ago (1.2.0) 27 Commits 8 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

jQuery Breakpoint

A simple way to use media queries in your jQuery javascripts!

The structure of a breakpoint

A breakpoint, in this case, is a javascript object consisting of four methods:

condition
,
first_enter
,
enter
and
exit
.

condition()
should return
true
when the breakpoint should be activated and
false
when it should be deactivated. Most likely, you'll want to use a media query as your condition, but this is not by any means required by the breakpoint plugin.
    $.breakpoint({
        condition: function () {
            return window.matchMedia('only screen and (min-width:500px)').matches;
        }
    });

Whenever the condition returns true, be it on page load or when the viewport changes, the

enter
method is executed. The first time this happens, the optional
first_enter
method will execute before the
enter
method. When condition becomes false, the
exit
method will execute. Be aware however that the
exit
method will only run provided that the condition previously has been true!
    $.breakpoint({
        condition: function () {
            return window.matchMedia('only screen and (min-width:500px)').matches;
        },
        first_enter: function () {
            // Code will run the first time condition() is true.
            // Here, you might create elements to use in
            // your enter and exit methods.
        },
        enter: function () {
            // Code will run whenever condition() becomes true.
        },
        exit: function () {
            // Code will run whenever condition() becomes false
            // (if it was previously true).
            // This is where you revert the things you do in the
            // enter method.
        }
    });

Debugging

The plugin provides some basic debugging which you can activate by setting

$.breakpoint.debug = true
. This will cause the plugin to log information to the browser console whenever a breakpoint is entered or exited. Add a
toString
method to your breakpoint object to distinguish between breakpoints; otherwise you'll see
[object Object]
as the name of the breakpoint.

Tips and tricks

MatchMedia support in older browsers

To use media queries via

window.matchMedia
in older browser you can use something like Paul Irish's matchMedia() polyfill. If you're using Modernizr, the same polyfill can be included by checking the Media queries checkbox in the Extra section.

Self invoking anonymous function

It's generally a good idea to use a self invoking anonymous function to return the breakpoint object. This way, you can define private variables which can be used in all your breakpoint methods.

    $.breakpoint((function () {
        var element;

    return {
        condition: function () {
            return window.matchMedia('only screen and (min-width:500px)').matches;
        },
        first_enter: function () {
            // Create element.
            element = $('<a>');
        },
        enter: function () {
            // Append element to DOM when condition is true.
            $('body').append(element);
        },
        exit: function () {
            // Detach element when condition is false.
            element.detach();
        }
    }
}()));

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.