JQuery plugin with responsive hooks for Twitter Bootstrap 3

I’ve been building a small responsive web application with the newest version of Twitter Bootstrap 3. I’m a fan of the new responsive CSS utility classes that it provides. You can attach a class to your div container and it will appear or disappear depending on the size of the screen. It makes things easy for rapid application development.

However at this stage there are no JavaScript “hooks” for these breakpoints. For example I may want to run a block of JavaScript to do something more complex when the screen is a certain size. It makes sense to have something like this so long as the overhead of monitoring the screen width is worth it.

As a consequence I’ve just built a tiny but potentially useful JQuery plugin that checks the screen size and triggers your JavaScript depending on the screen size. The breakpoints that I use are the same as the ones provided in the CSS for Bootstrap 3′s utility classes. You simply pass in the options with a subscription to one or more of the screen sizes.

This JQuery plugin is purely a work in progress at the moment. Hopefully if will be of use.

/**
 * Basic plugin to allow JavaScript subscriptions for Bootsrap 3 responsive switch widths.
 *
 * FROM THE BOOTSTRAP DOCS
 *
 * Extra small devices (phones, up to 480px) 
 * No media query since this is the default in Bootstrap 
 *
 * Small devices (tablets, 768px and up) 
 * @media (min-width: @screen-sm) { ... }
 *
 * Medium devices (desktops, 992px and up) 
 * @media (min-width: @screen-md) { ... }
 *
 * Large devices (large desktops, 1200px and up) 
 * @media (min-width: @screen-lg) { ... }
 *
 */
(function ($) {    
 
    $.fn.responsive = function () {
        // ref to this object
        var self = this;
        // keep track of the current size. so that 
        // we don't call the hook multiple times
        var currentSize = '';
 
        // extend the options from pre-defined values:
        var options = $.extend({
            extraSmall: function () { },
            small: function () { },
            medium: function () { },
            large: function () { }
        }, arguments[0] || {});
 
        // check after the initial load
        checkForResize();
 
        // check subscriptions when window width changes
        $(window).resize(function () {
            checkForResize();            
        });
 
        // see if subscriptions need to be fired
        function checkForResize() {
            // get the screen width
            var width = $(window).width();
 
            if (width > 1200) {
                if (currentSize != 'large') {
                    currentSize = 'large';
                    options.large.call(self);
                }                
            }
            else if (width > 992) {
                if (currentSize != 'medium') {
                    currentSize = 'medium';
                    options.medium.call(self);
                }
            }
            else if (width > 768) {
                if (currentSize != 'small') {
                    currentSize = 'small';
                    options.small.call(self);
                }
            }
            else if (currentSize != 'extraSmall') { 
                currentSize = 'extraSmall';
                options.extraSmall.call(self);
            }
        }
    };
 
})(jQuery);

And you call it like this …

$(document).ready(function () {
   $('body').responsive({
	extraSmall: function() {            
		// complicated JavaScript here for extra small screens
	},
	small: function() {
		// complicated JavaScript here for small screens
	},
	medium: function() {            
		// complicated JavaScript here for medium screens
	},
	large: function() {            
		// complicated JavaScript here for large screens
	},
   });
});

Comments are closed.