Skip to content
No description or website provided.
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples
libs
src
test
.gitignore
LICENSE-GPL
README.md
grunt.js
package.json

README.md

jQuery Responsive Layout

Provides responsive layout triggers for modifying the DOM.

Demo: http://code.beaucollins.com/jquery-responsive-layout/

Usage

First you need to "name" your @media blocks by using generated content on the body element:

body:after {
  content: 'default';
}

/* this is when the screen is 640px and less */
@media screen and (max-width:640px) {
  body:after {
    content: 'narrow';
  }
}

@media screen and (min-width:1200px) {
  body:after {
    content: 'wide';
  }
}

Now there are three "layouts" (default,narrow,wide) that are named by using the body:after generated content. By using the $.onLayout method you can provide the layout you want to identify and a callback to fire when that layout is applied.

$.onLayout('default', function(){
  console.log('Default styles!');
});

$.onLayout('narrow', function(){
  console.log("Narrow styles!");
});

$.onLayout('wide', function(){
  console.log('Wide styles!');
});

$.onLayout(function(from, to){
  console.log("Changed from:", from, "to:", to);
});
Something went wrong with that request. Please try again.