carabina / strappoint

strapPoint is a small jQuery utility plugin to make working with Bootstrap breakpoints easier

strapPoint

strapPoint is a small jQuery utility plugin to make working with Bootstrap breakpoints easier.

Mess with the demo here.

Download the latest release from the GitHub releases page.

Getting started

Include the plugin on your page after the reference to jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/vendor/jquery.strapPoint-0.1.0.min.js"></script>

Then start using strapPoint in your code:

$.strapPoint.on('lg', function () {
    console.log('We huge.');
});

Changelog

0.1.0

Initial release.

Methods

.on (size, callback)

• size — one of 'xs', 'sm', 'md', 'lg', or 'all'
• callback (direction) — callback function, with the direction ('up' or 'down') being passed as the only parameter
• Returns the listenerId

The callback gets called every time the window is resized to the specified breakpoint size. If 'all' is passed as the size, the callback will be run everytime the breakpoint changes.

If required, the direction is passed to the callback and can be used to check in which direction the window was resized. Returned is a string identifying the listener and can be used to remove it using .off.

$.strapPoint.on('sm', function (direction) {
    if (direction === 'down') {
        console.log('We shrank to small.');
    } else {
        console.log('We grew to small.');
    }
});

.one (size, callback)

• size — one of 'xs', 'sm', 'md', 'lg', or 'all'
• callback (direction) — callback function, with the direction ('up' or 'down') being passed as the only parameter
• Returns the listenerId

The same as .on, only the callback is only run once.

$.strapPoint.one('md', function (direction) {
    if (direction === 'down') {
        console.log('We shrank once to medium.');
    } else {
        console.log('We grew once to medium.');
    }
});

.xs/sm/md/lg (callback)

• callback (direction) — callback function, with the direction ('up' or 'down') being passed as the only parameter
• Returns the listenerId

These are just shorthand methods for calling .on.

$.strapPoint.lg(function (direction) {
    console.log('We are now large.');
});

.change (callback)

• callback (direction) — callback function, with the direction ('up' or 'down') being passed as the only parameter
• Returns the listenerId

A shorthand method for calling .on('all').

$.strapPoint.change(function (direction) {
    console.log('Something changed…');
});

.off (listenerId)

• listenerId — listener to remove

Removes a previously created listener.

var lgListener = $.strapPoint.lg(function (direction) {
    // …
});
$.strapPoint.off(lgListener);

.is (size)

• size — one of 'xs', 'sm', 'md', or 'lg'
• Returns true or false

Returns true if the current breakpoint is equal to size, otherwise false.

if ($.strapPoint.is('xs')) {
    console.log('We are extra small!');
}

.get ()

• Returns 'xs', 'sm', 'md', or 'lg'

Returns the current breakpoint.

console.log('We are ' + $.strapPoint.get());

Issues

Found a bug? Please create an issue here on GitHub.

License

strapPoint is licensed under the MIT license.