Skip to content
This repository has been archived by the owner on Aug 15, 2019. It is now read-only.

More accurate calculations on non-WebKit browsers #6

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+41 −6
Open

More accurate calculations on non-WebKit browsers #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ea9785
Bugfix: account for width of scrollbar when calculating the width of …
Jan 2, 2012
5865d82
Width is now accurate in all browsers. We add scrollbar width to wind…
Jan 25, 2012
2a12d66
Updated readme file
Jun 14, 2012
f4d2315
Tweak code formatting in readme
Jun 14, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
43 changes: 39 additions & 4 deletions breakpoints.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 ) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jquery deprecated $.browser with version 1.9
Maybe we can define something like that instead of $.browser.msie:
var isMsie = /MSIE/gi.test(navigator.userAgent);

var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
scrollbarWidth = $textarea1.width() - $textarea2.width();
$textarea1.add($textarea2).remove();
} else {
var $div = $('<div />')
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
.prependTo('body').append('<div />').find('div')
.css({ width: '100%', height: 200 });
scrollbarWidth = 100 - $div.width();
$div.parent().remove();
}
}
return scrollbarWidth;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on this line, you assume that body height is bigger than window height and make calculation according to that.
How about page content already fits the window and there is no scrollbar?
We have to make return line just like that:
return $("body").height() &gt; $(window).height() ? scrollbarWidth : 0;

};

$.fn.setBreakpoints = function(settings) {
var options = jQuery.extend({
distinct: true,
Expand All @@ -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) })) {
Expand Down Expand Up @@ -87,4 +122,4 @@
},250);
};

})(jQuery);
})(jQuery);