Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

jQuery event plugin for sites with responsive CSS layout.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 jquery.formatchange-demo.html
Octocat-spinner-32 jquery.formatchange-min.js
Octocat-spinner-32 jquery.formatchange.js
README.md

jQuery.formatChange() - for sites using responsive CSS layout.

jQuery.formatChange() makes it easy to add tailor-made scripting effects to each @media format breakpoint - and respond intelligently when users tilt their phones and tablets, or resize their browser windows.

The script triggers a formatchange event on your window object whenever it detects that a new (named) CSS @media query block has become active.

First off, give a unique name to each @media query breakpoint you want your script to respond to. (For full browser support, the name must be coded both as :after content, and as a font-family value.)

@media screen and (min-width: 0) {
  #mediaformat{ font-family: "mobile"; }
  #mediaformat:after { content: "mobile"; }
}
@media screen and (min-width: 700px) {
  #mediaformat{ font-family: "tablet"; }
  #mediaformat:after { content: "tablet"; }
}
@media screen and (min-width: 950px) {
  #mediaformat{ font-family: "desktop"; }
  #mediaformat:after { content: "desktop"; }
}

Then bind your formatchange event handlers and intialize your scripting effects, either based on the current format, and/or which format was active last.

$(window).on('formatchange', function (e, media) {
    // NOTE: `media` is a persistant object.
    if ( media.format === 'mobile' )
    {
      // do stuff

      if ( !media.lastFormat )
      {
        // do firstTime initialization
      }

      if ( media.lastFormat === 'desktop' )
      {
        // teardown desktop effects.
      }
    }
    else // "tablet" or "desktop"
    {
      // do other things
    }
  });

...and then start the plugin to trigger the initial 'formatchange' event

var media = $.formatChange();
// Now do things with media outside event handlers.

It is furthermore possible to split your media formats into named groups (say "Large" and "Small") and check if the media.became('Large') or if the media.left('Large'). This saves a tremendous lot of compound if statements.

For lots more details and feature info, go read the inline documentation and study the demo.

Something went wrong with that request. Please try again.