MQBE. Media Query Breakpoint Events

This small function creates JQuery events that are fired when you enter or leave a CSS media query state, for instance from desktop to tablet... etc. It's useful when you need to start or stop some JS functionallity depending on MediaQuery changes / states.

Installation

1a. Use as Rails gem

Simply include in your gemfile:

gem 'mqbe'

and run bundle install

Then add in your application.js (its recommend to be included just after JQuery)

//= require mqbe

1b. Use standalone

If you want to add it to your project by hand, copy dist/mqbe.js or dist/mqbe.min.js (minified) in your project and be sure that its included in the pages after JQuery.

2. Include CSS

The functionallity of MQBE depends on a little piece of CSS, where you can define your media query breakpoints. You must add an string to identify that state from the JS. It's easier that it sounds. Take a look to the code below.

Use only [a-zA-Z_] chars to define the string, and don't use hyphens -

/* DESKTOP */
body:after {
  content: 'desktop'; /* <- string that defines this state */
  display: none;
}

/* SMALL DESKTOP */
@media only screen and (max-width: 1200px) {
  body:after {
    content: 'small_desktop'; /* <- string that defines this state */
  }
}

/* TABLET */
@media only screen and (max-width: 1024px) {
  body:after {
    content: 'tablet'; /* <- string that defines this state */
  }
}

@media only screen and (max-width: 767px) {
  body:after {
    content: 'mobile'; /* <- string that defines this state */
  }
}

For the lazy ones, you can just include dist/mqbe.min.css which defines this 4 media queries and customize the breakpoints values to your project's needs.

3. Usage: Add events

Define you events related to your CSS breakpoint names on domready. You have two events available for each Media Query state: enter, and leave. enter its also fired when the page loads the first time.

Below you have an example.

$(document)
  .on('enter.mobile.mqbe', function() {
    // Especial flexsliders
    $('.flexslider-mobile-only').flexslider({
      animation: "slide",
      controlNav: false
    });
    // Filter groups
    $('.list-filters > .title').on('click', function() {
      $(this).parent().toggleClass('expanded');
    });
  })

  .on('leave.mobile.mqbe', function() {
    flexdestroy('.flexslider-mobile-only');
  });

All events are in the namespace mqbe so you can add a generic listener than will be triggered on every breakpoint.

$(document).on('mqbe', function() {
  // Do whatever you need on every defined breakpoints
});

You can clean the events from any state using the jquery off method.

$(document).off('enter.desktop.mqbe');

Also you can disable all mqbe events

$(document).off('mqbe');

Take a look to the example

You have an example in the demo directory, I recommend you to take a look to it to fully understand the idea.

Demo included in this repo.

Demo / Dist

MQBE uses gulp to serve a demo/test server and build dist versions.

Prerequisites

First you need to have node and gulp-cli installed on your environment.

Then install all dependencies, in repo's root:

$ npm install

Demo

To test and develop you can start a connect server watching src/*.js and src/*.scss at http://localhost:3000/.

$ gulp server
## or just
$ gulp

To build minified versions of MQBE in dist/ you must run.

$ gulp dist

Fixes / Changelog

V.2.0.3 First Rails Gem release.
V.2.0.2 Changing ot max-width and breakpoints in px.
V.2.0.1 Changing max-width to max-device-width in mediaqueries due to browser zoom issues.
V.2.0.0 Delegate events on jquery instead custom queues. Namespace .mqbe. Add generic event .mqbe on every breakpoint.
V.1.0.5 Added gulp to generate minified and demo files.
V.1.04 Renamed to MQBE.v.js. Added debounced resize. Now library initializes itself.
V.1.03 Added event queue, and nex syntax. Added off method, and method chainning.
V.1.01 Chrome 43 returns state with single quotes "'desktop'", added regex to clean that extra quotes

carloscabo/MQBE