hejmartin/ jquery-breakpoint

(1.2.0) almost 6 years ago

JavaScript

HTML

Need help with jquery-breakpoint?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hejmartin

127 Stars

13 Forks

27 Commits

1 Opened issues

Description

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

Services available

Need anything else?

Contributors list

No Data

Readme

jQuery Breakpoint

Name: jquery-breakpoint
Brand: jquery-breakpoint
SKU: //hejmartin/jquery-breakpoint
Rating: 2.0675 (127 reviews)

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