jQuery Responsive/Breakpoint Optimized Library

responsive.jquery.js

/**
 * @file responsive.js
 * Helper script that will be used for making front-end changes bases on
 * boostrap breakpoints.
 * Full Library Version: https://github.com/jerrylow/breakpoints
 * ---------------------------------------------------------------------
 *
 *
 * Initiate:
 * $(window).responsive();
 *
 * Detect a breakpoint change
 *
 * $(window).bind('breakpoint-change', function(e) {
 *   // Do something
 *   // console.log('From:' e.from ' + '- To:' + e.to);
 * });
 *
 * If its less than a specific bootstrap size
 * Also interchangeable with $('window').responsiveGreaterThan();
 *
 * $(window).bind('breakpoint-change', function(e) {
 *  if ($(window).responsiveLessThan('md')) {
 *    // Do something
 *  }
 * });
 *
 * If its less than (and equal to) a specific bootstrap size
 *
 * $(window).bind('breakpoint-change', function(e) {
 *  if ($(window).responsiveLessThan('md', true)) {
 *    // Do something
 *  }
 * });
*/
(function($) {
  $.fn.responsive = function(options) {
    var settings = $.extend({}, $.fn.responsive.defaults, options);

    var vars = {
      bp: settings.bp
    };

    // Store info
    var responsive = this;
    responsive.data('bp', settings.bp);

    var $window = $(window);
    responsive.data('originalBreakpoint', responsive.getBreakpoint());

    // Handle the resize 400ms after user stopped resizing
    var resizeThresholdTimerId = null;

    if ($.isFunction($(window).on)) {
      $(window).on('resize.responsive', function() {
        resizeThresholdTimerId && window.clearTimeout(resizeThresholdTimerId);

        resizeThresholdTimerId = window.setTimeout(function() {
          responsive.resizeCallback();
        }, 400);
      });
    }
  };

  $.fn.getBreakpoint = function() {
    var windowWidth = $(window).width();
    var breakpoint;
    var bp = $(this).data('bp');

    $.each(bp, function(i, value) {
      if (windowWidth >= value.bp_width) {
        breakpoint = bp[i].bp_name;
      }
    });

    // Fallback to desktop.
    if (breakpoint == undefined) {
      breakpoint = 'lg';
    }

    return breakpoint;
  };

  $.fn.resizeCallback = function() {
    var newBreakpoint = $(this).getBreakpoint();
    var originalBreakpoint = $(this).data('originalBreakpoint');

    if (newBreakpoint !== originalBreakpoint) {
      $(window).trigger({
        'type' : 'breakpoint-change',
        'from' : originalBreakpoint,
        'to' : newBreakpoint
      });

      $(this).data('originalBreakpoint', newBreakpoint);
    }
  };

  $.fn.responsiveLessThan = function(checkBreakpoint, equal) {
    equal = typeof equal !== 'undefined' ? equal : false;

    var windowWidth = $(window).width();
    var breakpoint = $(this).getBreakpointValue(checkBreakpoint);

    if (equal && windowWidth <= breakpoint) {
      return true;
    }
    else if (windowWidth < breakpoint) {
      return true;
    }

    return false;
  }

  $.fn.responsiveGreaterThan = function(checkBreakpoint, equal) {
    equal = typeof equal !== 'undefined' ? equal : false;

    var windowWidth = $(window).width();
    var breakpoint = $(this).getBreakpointValue(checkBreakpoint);

    if (equal && windowWidth >= breakpoint) {
      return true;
    }
    else if (windowWidth > breakpoint) {
      return true;
    }

    return false;
  }

  $.fn.getBreakpointValue = function(breakpointName) {
    var bp = $(this).data('bp');
    var breakpoint;

     $.each(bp, function(i, value) {
      if (breakpointName == value.bp_name) {
        breakpoint = bp[i].bp_width;
      }
    });

    return breakpoint;
  }


  $.fn.responsive.defaults = {
    bp: [
      {'bp_name' : 'xs', 'bp_width' : 0},
      {'bp_name' : 'xs-wide', 'bp_width' : 480},
      {'bp_name' : 'sm', 'bp_width' : 768},
      {'bp_name' : 'md', 'bp_width' : 992},
      {'bp_name' : 'lg', 'bp_width' : 1200}
    ]
  };

})(jQuery);

This has officially been rewritten as a library: Breakpoints