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.
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.');
});
Initial release.
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.');
}
});
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.');
}
});
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.');
});
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…');
});
listenerId
— listener to remove
Removes a previously created listener.
var lgListener = $.strapPoint.lg(function (direction) {
// …
});
$.strapPoint.off(lgListener);
size
— one of'xs'
,'sm'
,'md'
, or'lg'
- Returns
true
orfalse
Returns true
if the current breakpoint is equal to size
, otherwise false
.
if ($.strapPoint.is('xs')) {
console.log('We are extra small!');
}
- Returns
'xs'
,'sm'
,'md'
, or'lg'
Returns the current breakpoint.
console.log('We are ' + $.strapPoint.get());
Found a bug? Please create an issue here on GitHub.
strapPoint is licensed under the MIT license.