diff --git a/README.md b/README.md index ff317fa..931dc14 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. -[Get it from Github](https://github.com/xoxco/breakpoints) +[Get it from Github](https://github.com/352Media/breakpoints) [View Demo](http://xoxco.com/projects/code/breakpoints/) -Created by [XOXCO](http://xoxco.com) +Created by [XOXCO](http://xoxco.com) with contributions from [352 Media Group](http://www.352media.com/). This 352 Media Group branch includes more accurate calculations for non-WebKit browsers but is otherwise identical to XOXCO's version of the plugin. See [this pull request](https://github.com/xoxco/breakpoints/pull/6) for details. ## Instructions diff --git a/breakpoints.js b/breakpoints.js index 2e73a35..b81cdd4 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -1,11 +1,13 @@ /* Breakpoints.js - version 1.0 + version 1.1 Creates handy events for your responsive design breakpoints - Copyright 2011 XOXCO, Inc + Copyright 2011-2012 XOXCO, Inc http://xoxco.com/ + With contributions from 352 Media Group + http://www.352media.com/ Documentation for this plugin lives here: http://xoxco.com/projects/code/breakpoints @@ -27,6 +29,32 @@ lastSize = 0; }; + var scrollbarWidth = 0; + + $.getScrollbarWidth = function() { + /* Gets the width of the OS scrollbar + https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js */ + + if ( !scrollbarWidth ) { + if ( $.browser.msie ) { + var $textarea1 = $('') + .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'), + $textarea2 = $('') + .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'); + scrollbarWidth = $textarea1.width() - $textarea2.width(); + $textarea1.add($textarea2).remove(); + } else { + var $div = $('
') + .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 }) + .prependTo('body').append('').find('div') + .css({ width: '100%', height: 200 }); + scrollbarWidth = 100 - $div.width(); + $div.parent().remove(); + } + } + return scrollbarWidth; + }; + $.fn.setBreakpoints = function(settings) { var options = jQuery.extend({ distinct: true, @@ -36,7 +64,14 @@ interval = setInterval(function() { - var w = $(window).width(); + var w; + if ($.browser.webkit) { + w = $(window).width(); + } else { + w = $(window).width() + $.getScrollbarWidth(); + } + + // For continuous (i.e., most non-print) media, the width specified in a media query includes the scrollbar (if one exists). In WebKit, .width() includes the scrollbar. In other browsers, it does not, so we need to add the width of the scrollbar ourselves. var done = false; for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) { @@ -87,4 +122,4 @@ },250); }; -})(jQuery); +})(jQuery); \ No newline at end of file