jQuery Breakpoints Demo and Documentation

Breakpoints is a light weight jQuery library to detect and manage breakpoint changes. Breakpoint was originally written to optimize large single page sites with too many binds on resize causing performance issues. While still achieving the previous goal it has also been re-written to assist with general breakpoint management.

Initialize

Include breakpoints library after jQuery, then initialize globally or on any page you want to use breakpoints.

<head>
  <script src="./scripts/jquery.min.js"></script>
  <script type="text/javascript" src="./scripts/jquery.breakpoints.min.js"></script>
</head>

$(document).ready(function() {
  $(window).breakpoints();
});

Listening for Breakpoint Changes

Breakpoints will trigger breakpoint-change when the viewport enters a new breakpoint. The returned event will include from and to on event indicating the previous and new breakpoint. Resize your window to see what happens

Current Breakpoint:
Previous Breakpoint:

$(window).bind('breakpoint-change', function(e) {
  var $outputListening = $('#output-listening');
  $outputListening.find('#output-listening--current').html(e.to);
  $outputListening.find('#output-listening--previous').html(e.from);
});

Check Specific Breakpoints

Checks only happens once and needs to constantly be re-checked based on the use case. The example below checks onload but resizing won't check again. Notice the box's content won't change. Try resizing then refreshing.

I only show up on XS

I only show up on SM

I only show up on MD

I only show up on LG

$outputListenExecute = $('#output-listen-execute');

function outputListenExecuteHide($parent) {
  $parent.children('div').hide();
}

$(window).breakpoints('inside', 'xs', function() {
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__xs').show();
});

$(window).breakpoints('inside', 'sm', function() {
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__sm').show();
});

$(window).breakpoints('inside', 'md', function() {
  console.log('here');
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__md').show();
});

$(window).breakpoints('inside', 'lg', function() {
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__lg').show();
});

A proper use case of checks is when you want to execute different code in an interactive situation, such as a button that may behave differently based on the breakpoint.

$('.output__btn--check').click(function() {
  $(window).breakpoints('lessThan', 'md', function() {
    alert('Screen is less than 992px');
  });

  $(window).breakpoints('greaterEqualTo', 'md', function() {
    alert('Screen is greater or equal to 992px');
  });
});

Listening for Breakpoints then Execute

If you need to listen for a specific breakpoint before executing code you can listen for compare events that triggers when breakpoints enter and exit thresholds.

I only show up on SM and below

I only show up on MD and above

$outputListenExecute = $('#output-listen-execute');

$(window).on('lessThan-md', function() {
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__sm').show();
});

$(window).on('greaterEqualTo-md', function() {
  outputListenExecuteHide($outputListenExecute);
  $outputListenExecute.find('.output--listen-execute__md').show();
});