Rubberband

A jQuery plugin for responsive media query events.

Current Version: 3.0.3


Usage

Installation

Include the following resources on your page before initializing:

<script src="jquery.fs.rubberband.js"></script>

Bower

You can deploy and update via the command line with Bower:

bower install Rubberband

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set custom options for a specific instance by attaching a data-boxer-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
minWidth 0 Array of min-widths
maxWidth Infinity Array of max-widths
minHeight 0 Array of min-heights
maxHeight Infinity Array of max-heights
unit string 'px' Unit to use when matching widths and heights

Methods

Methods are publicly available to all active instances, unless otherwise stated.

bind

Binds callbacks to media query matching

$.rubberband("bind", "(min-width: 500px)", { ... });
Parameter Type Default Description
media string Media query to match
data object Object containing 'enter' and 'leave' callbacks

unbind

Unbinds all callbacks from media query

$.rubberband("unbind", "(min-width: 500px)", { ... });
Parameter Type Default Description
media string Media query to match

defaults

Sets default plugin options

$.rubberband("defaults", opts);
Parameter Type Default Description
opts object {} Options object

state

Returns the current state

var state = $.rubberband("state");