diff --git a/README.md b/README.md index ff317fa..be3b08d 100644 --- a/README.md +++ b/README.md @@ -47,4 +47,8 @@ Created by [XOXCO](http://xoxco.com) $(window).bind('exitBreakpoint1024',function() { ... }); + + // Immediately run hooks + $(window).applyBreakpoints(); + diff --git a/breakpoints.js b/breakpoints.js index 2e73a35..03ebc90 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -15,10 +15,59 @@ */ (function($) { - var lastSize = 0; var interval = null; - + var options = null; + + var updateFunction = function() { + var w = $(window).width(); + var done = false; + + for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) { + + // fire onEnter when a browser expands into a new breakpoint + // if in distinct mode, remove all other breakpoints first. + if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) { + if (options.distinct) { + for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) { + if ($('body').hasClass('breakpoint-' + options.breakpoints[x])) { + $('body').removeClass('breakpoint-' + options.breakpoints[x]); + $(window).trigger('exitBreakpoint' + options.breakpoints[x]); + } + } + done = true; + } + $('body').addClass('breakpoint-' + options.breakpoints[bp]); + $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); + + } + + // fire onExit when browser contracts out of a larger breakpoint + if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) { + $('body').removeClass('breakpoint-' + options.breakpoints[bp]); + $(window).trigger('exitBreakpoint' + options.breakpoints[bp]); + + } + + // if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint + if ( + options.distinct && // only one breakpoint at a time + w >= options.breakpoints[bp] && // and we are in this one + w < options.breakpoints[bp-1] && // and smaller than the bigger one + lastSize > w && // and we contracted + lastSize >0 && // and this is not the first time + !$('body').hasClass('breakpoint-' + options.breakpoints[bp]) // and we aren't already in this breakpoint + ) { + $('body').addClass('breakpoint-' + options.breakpoints[bp]); + $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); + } + } + + // set up for next call + if (lastSize != w) { + lastSize = w; + } + } $.fn.resetBreakpoints = function() { $(window).unbind('resize'); if (interval) { @@ -27,64 +76,16 @@ lastSize = 0; }; + $.fn.applyBreakpoints = function() { + updateFunction() + } + $.fn.setBreakpoints = function(settings) { - var options = jQuery.extend({ + options = jQuery.extend({ distinct: true, breakpoints: new Array(320,480,768,1024) - },settings); - - - interval = setInterval(function() { - - var w = $(window).width(); - var done = false; - - for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) { - - // fire onEnter when a browser expands into a new breakpoint - // if in distinct mode, remove all other breakpoints first. - if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) { - if (options.distinct) { - for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) { - if ($('body').hasClass('breakpoint-' + options.breakpoints[x])) { - $('body').removeClass('breakpoint-' + options.breakpoints[x]); - $(window).trigger('exitBreakpoint' + options.breakpoints[x]); - } - } - done = true; - } - $('body').addClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); - - } - - // fire onExit when browser contracts out of a larger breakpoint - if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) { - $('body').removeClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('exitBreakpoint' + options.breakpoints[bp]); - - } - - // if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint - if ( - options.distinct && // only one breakpoint at a time - w >= options.breakpoints[bp] && // and we are in this one - w < options.breakpoints[bp-1] && // and smaller than the bigger one - lastSize > w && // and we contracted - lastSize >0 && // and this is not the first time - !$('body').hasClass('breakpoint-' + options.breakpoints[bp]) // and we aren't already in this breakpoint - ) { - $('body').addClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); - - } - } - - // set up for next call - if (lastSize != w) { - lastSize = w; - } - },250); + },settings); + $(window).resize(updateFunction); }; })(jQuery);