threshold

manages window width changes

• data-attribute window with the width range name as value
• callback when width range switches to another (which range doesn't matter)
• callback after switch to a specific range (several callbacks possible)

Demo

See threshold in action

Usage

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include plugin's code:

   <script src="dist/threshold.min.js"></script>

3. Call the plugin:

   threshold();

4. Declare callbacks (whenever):

   $(window).data('threshold').after('mobile', function() {
       $('#console').append('<p>[mobile]<br>callback after switch to a specific range: < 760px</p>');
   });
      $(window).data('threshold').after('x-small', function() {
       $('#console').append('<p>[x-small]<br>callback after switch to a specific range: >= 760px and < 960px (a first callback)</p>');
   });
      $(window).data('threshold').after('x-small', function() {
          $('#console').append('<p>[x-small]<br>other callback after switch to a specific range: >= 760px and < 960px (a second callback)</p>');
      });
   $(window).data('threshold').after(['small', 'medium'], function() {
       $('#console').append('<p>[small] AND [medium]<br>callback after switch to a specific range: >= 960px and < 1280px AND >= 1280px and < 1440px</p>');
   });
   $(window).data('threshold').after('large|x-large', function() {
       $('#console').append('<p>[large] OR [x-large]<br>callback after switch to a specific range: >= 1440px ie >= 1440px and < 1600px OR >= 1600px</p>');
   });
   $(window).data('threshold').after('all', function() {
       $('#console').append('<p>[all]<br>callback when width range switches to another</p>');
   });

5. Override default values [OPTIONAL]:

   threshold({
   
       // breakpoints (minimum: 2)
       ranges: {
         'x-large': ['1600px', -1],        // '1480px'
         large: ['1440px', '1599px'],      // '1360px'
         medium: ['1280px', '1439px'],     // '1220px'
         small: ['960px', '1279px'],       // '920px'
         'x-small': ['760px', '959px'],    // '740px',
         mobile: [-1,'759px'],             // '100%',
       },
   
       // data attribute name (or class name prefix) | default: 'window'
       name: 'width', 
   
       // data attribute (false) or class (true) | default: false
       class: true,
       
   });

You can specify how many ranges you want.

• ranges setting takes as key the width range name (string) and as values the media query begin and end (array). "-1" means no value (for min-width or max-width).
• name setting allows you to change the default data attribute name by your own (or class prefix name if class is defined as true).
• class allows you to use a class instead of data attribute.

You can also grab Both using bower:

	bower install threshold --save

Authors

idomusha

License

MIT: http://idomusha.mit-license.org/