Version 1.0.0
Allows useful callbacks to be fired at set "breakpoints" or window sizes reached upon resizing the viewport so as to create responsive web applications.
Wil Neeley ( @wilneeley / trestlemedia.net / github.com )
Include jquery.break.min.js after jQuery.
$(window).break({
media: true,
points: [
{
point: 760,
onBelow: function( width, point ) {},
onAbove: function() {},
onBelowOnce: function() {},
onAboveOnce: function() {}
},
{
point: 1240,
onBelow: function( width, point ) {},
onAbove: function() {},
onBelowOnce: function() {},
onAboveOnce: function() {}
}
]
});Setting the media property to true causes registered breakpoints to fire at the same point as media queries that are also set to fire at the same pixel by calculating the width of the scroll bar on the initialized element since the media query measurement of the viewport differs from jQuery.width()'s measurement of the document window.
Tested with jQuery 1.4.x.
Works in IE6+, Chrome 14+, Safari 4+, Firefox 3.0+, Opera 10+.
See example.html in examples folder.
- initial version