Skip to content

Allows useful callbacks to be fired at set "breakpoints" or window sizes reached upon resizing the viewport so as to create responsive web applications.

License

Notifications You must be signed in to change notification settings

Xaxis/jquery.break

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jQuery Break

Version 1.0.0

Summary

Allows useful callbacks to be fired at set "breakpoints" or window sizes reached upon resizing the viewport so as to create responsive web applications.

Author

Wil Neeley ( @wilneeley / trestlemedia.net / github.com )

Usage

Include jquery.break.min.js after jQuery.

Initialize Breakpoints

$(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() {}
    }
  ]
});

Caveats

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.

Requirements/Browsers

Tested with jQuery 1.4.x.

Works in IE6+, Chrome 14+, Safari 4+, Firefox 3.0+, Opera 10+.

Examples

See example.html in examples folder.

Changelog

Version 1.0.0

  • initial version

About

Allows useful callbacks to be fired at set "breakpoints" or window sizes reached upon resizing the viewport so as to create responsive web applications.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •