Rubberband Demo

View Documentation

Basic

Rubberband can track global changes to screen size based on your existing grid system. This is useful when many elements need to be resized on all changes to screen size. Start by configuring the dimensions you'd like to track by passing arrays containing the target width and/or heights:

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

After initializing, simply listen for the "snap" event:

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

Demo

Binding

Rubberband can also bind events to specific media query changes for more fine grain control:

$.rubberband("bind", "(min-width: 740px)", {
	enter: function() {
		...
	},
	leave: function() {
		...
	}
});

Note: The leave callback will only fire after the target media query has been matched at least once. If the media query never matches, neither callback will fire.

Demo

IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).