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:

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

2. Include plugin's code:

   <scriptsrc="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: falseclass: 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/