A simple way to use media queries in your jQuery javascripts!
No Data
A simple way to use media queries in your jQuery javascripts!
A breakpoint, in this case, is a javascript object consisting of four methods:
condition,
first_enter,
enterand
exit.
condition()should return
truewhen the breakpoint should be activated and
falsewhen it should be deactivated. Most likely, you'll want to use a media query as your condition, but this is not by any means required by the breakpoint plugin.
$.breakpoint({ condition: function () { return window.matchMedia('only screen and (min-width:500px)').matches; } });
Whenever the condition returns true, be it on page load or when the viewport changes, the
entermethod is executed. The first time this happens, the optional
first_entermethod will execute before the
entermethod. When condition becomes false, the
exitmethod will execute. Be aware however that the
exitmethod will only run provided that the condition previously has been true!
$.breakpoint({ condition: function () { return window.matchMedia('only screen and (min-width:500px)').matches; }, first_enter: function () { // Code will run the first time condition() is true. // Here, you might create elements to use in // your enter and exit methods. }, enter: function () { // Code will run whenever condition() becomes true. }, exit: function () { // Code will run whenever condition() becomes false // (if it was previously true). // This is where you revert the things you do in the // enter method. } });
The plugin provides some basic debugging which you can activate by setting
$.breakpoint.debug = true. This will cause the plugin to log information to the browser console whenever a breakpoint is entered or exited. Add a
toStringmethod to your breakpoint object to distinguish between breakpoints; otherwise you'll see
[object Object]as the name of the breakpoint.
To use media queries via
window.matchMediain older browser you can use something like Paul Irish's matchMedia() polyfill. If you're using Modernizr, the same polyfill can be included by checking the Media queries checkbox in the Extra section.
It's generally a good idea to use a self invoking anonymous function to return the breakpoint object. This way, you can define private variables which can be used in all your breakpoint methods.
$.breakpoint((function () { var element;return { condition: function () { return window.matchMedia('only screen and (min-width:500px)').matches; }, first_enter: function () { // Create element. element = $('<a>'); }, enter: function () { // Append element to DOM when condition is true. $('body').append(element); }, exit: function () { // Detach element when condition is false. element.detach(); } } }()));