Rubberband

A jQuery plugin for adding responsive breakpoint events.

Sometimes you need to know when a responsive page changes. Rubberband allows scripts to act on media query changes in real time by making use of the browser's internal media query matching system, window.matchMedia.

Download on GitHub

Configuration

Option	Default	Description
`debounce`	`5`	Debounce delay; prevents erroneous events
`minHeight`	`[0]`	Array of breakpoints by min-height
`maxHeight`	`[Infinity]`	Array of breakpoints by max-width
`minWidth`	`[0]`	Array of breakpoints by min-width
`maxWidth`	`[Infinity]`	Array of breakpoints by max-width
`unit`	`"px"`	Unit of breakpoints; "px", "em"

Events

Event	Return	Description
`snap`	`[event, data]`	Fired when a media query match changes

Examples

Basic

Rubberband must first be configured by passing arrays containg dimentions you'd like to track when initializing:

$.rubberband({
    minWidth: [ 320, 500, 740, 980, 1220 ],
	maxWidth: [ 1220, 980, 740, 500, 320 ],
	minHeight: [ 400, 800 ],
	maxHeight: [ 800, 400 ]
});

Once Rubberband is all set up, simply listen for the "snap" event:

$(window).on("snap", function(e, data) {
	console.log(data.minWidth, data.maxWidth, data.minHeight, data.maxHeight);
});

Demo

Compatibility

Requires jQuery 1.7+
Tested in Firefox, Chrome, Safari, IE7+

License

Released under the MIT License. Feel free to use it in personal and commercial projects.