From 4ea9785d2a5cc299ba9e9363a06f69784bf6548a Mon Sep 17 00:00:00 2001 From: Ryan DeBeasi Date: Mon, 2 Jan 2012 13:22:33 -0500 Subject: [PATCH 1/4] Bugfix: account for width of scrollbar when calculating the width of the display area. See http://www.w3.org/TR/css3-mediaqueries/#width for more info. --- README.md | 1 + breakpoints.js | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ff317fa..49e97c7 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire cust [View Demo](http://xoxco.com/projects/code/breakpoints/) Created by [XOXCO](http://xoxco.com) +With contributions from [352 Media Group](http://www.352media.com/) ## Instructions diff --git a/breakpoints.js b/breakpoints.js index 2e73a35..8eba9ab 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,8 @@ interval = setInterval(function() { - var w = $(window).width(); + var w = $(window).width() + $.getScrollbarWidth(); + // For continuous (i.e., most non-print) media, the width specified in a CSS media query includes the scrollbar (if one exists). jQuery won't include the scrollbar in its width calculation, 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) })) { From 5865d82457392d5720363bc99c6ee289c5f17f68 Mon Sep 17 00:00:00 2001 From: Ryan DeBeasi Date: Wed, 25 Jan 2012 12:03:49 -0500 Subject: [PATCH 2/4] Width is now accurate in all browsers. We add scrollbar width to window width on every browser except for WebKit, which includes scrollbar width in window width. --- README.md | 3 +-- breakpoints.js | 12 +++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 49e97c7..f739f48 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,7 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire cust [View Demo](http://xoxco.com/projects/code/breakpoints/) -Created by [XOXCO](http://xoxco.com) -With contributions from [352 Media Group](http://www.352media.com/) +Created by [XOXCO](http://xoxco.com) with contributions from [352 Media Group](http://www.352media.com/) ## Instructions diff --git a/breakpoints.js b/breakpoints.js index 8eba9ab..b81cdd4 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -64,8 +64,14 @@ interval = setInterval(function() { - var w = $(window).width() + $.getScrollbarWidth(); - // For continuous (i.e., most non-print) media, the width specified in a CSS media query includes the scrollbar (if one exists). jQuery won't include the scrollbar in its width calculation, so we need to add the width of the scrollbar ourselves. + 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) })) { @@ -116,4 +122,4 @@ },250); }; -})(jQuery); +})(jQuery); \ No newline at end of file From 2a12d66e2cf3b0a9fee1fa843dc71a4fe1718421 Mon Sep 17 00:00:00 2001 From: Ryan DeBeasi Date: Thu, 14 Jun 2012 09:32:49 -0400 Subject: [PATCH 3/4] Updated readme file --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f739f48..15062e1 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,15 @@ 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) with contributions from [352 Media Group](http://www.352media.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 + '''javascript $(window).setBreakpoints({ // use only largest available vs use all available distinct: true, @@ -47,4 +48,4 @@ Created by [XOXCO](http://xoxco.com) with contributions from [352 Media Group](h $(window).bind('exitBreakpoint1024',function() { ... }); - + ''' From f4d2315d639d1e558174b02586dc1027866a7364 Mon Sep 17 00:00:00 2001 From: Ryan DeBeasi Date: Thu, 14 Jun 2012 09:41:20 -0400 Subject: [PATCH 4/4] Tweak code formatting in readme --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 15062e1..931dc14 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,6 @@ Created by [XOXCO](http://xoxco.com) with contributions from [352 Media Group](h ## Instructions - '''javascript $(window).setBreakpoints({ // use only largest available vs use all available distinct: true, @@ -48,4 +47,4 @@ Created by [XOXCO](http://xoxco.com) with contributions from [352 Media Group](h $(window).bind('exitBreakpoint1024',function() { ... }); - ''' +