├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── demo ├── index.html └── styles │ └── styles.css ├── jquery.breakpoints.js ├── jquery.breakpoints.min.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jerry Low 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Breakpoints 2 | 3 | 4 | ## What is this? 5 | 6 | Breakpoints is a light weight jQuery library to detect and manage breakpoint changes. Breakpoint was originally written to optimize large single page sites with too many binds on `resize` causing performance issues. While still achieving the previous goal it has also been re-written to assist with general breakpoint management. 7 | 8 | [Demo](http://jerrylow.com/jquery-breakpoints/) 9 | 10 | 11 | ## How to use 12 | 13 | Include breakpoints library after jQuery, then initialize globally or on any page you want to use breakpoints. 14 | 15 | ```js 16 | $(document).ready(function() { 17 | $(window).breakpoints(); 18 | }); 19 | ``` 20 | 21 | Bind to window's event `breakpoint-change` and listen for breakpoint changes or bind to one of the compare triggers to react to specific breakpoints. 22 | 23 | 24 | ## Package Managers 25 | 26 | ### Bower 27 | 28 | ``` 29 | bower install jquery-breakpoints 30 | ``` 31 | 32 | ### NPM 33 | 34 | ``` 35 | npm install jquery-breakpoints 36 | ``` 37 | 38 | 39 | ## Examples 40 | 41 | ### Listening for Breakpoint Changes 42 | 43 | Breakpoints will trigger `breakpoint-change` when the viewport enters a new breakpoint. The returned event will include `from` and `to` on event indicating the previous and new breakpoint. 44 | 45 | ```js 46 | // Basic Bind 47 | $(window).bind("breakpoint-change", function(event) { 48 | console.log(event.from, event.to); 49 | }); 50 | 51 | // Example Usage 52 | $(window).bind("breakpoint-change", function(event) { 53 | if (event.to === "md") { 54 | ... 55 | } 56 | }); 57 | ``` 58 | 59 | ### Listening for Specific Breakpoints Then Execute 60 | 61 | Breakpoints will trigger compare triggers followed by the breakpoint name. All of the [comparing methods](#comparing-methods) have a trigger with the _exception_ of `lessThanEqual` which conflicts with `greaterThanEqual`. Compare triggers will send on initializing. 62 | 63 | ```js 64 | $(window).on('lessThan-md', function() { 65 | // Do something when viewport is less than 992px 66 | }); 67 | 68 | $(window).on('greaterEqualTo-md', function() { 69 | // Do something when viewport is greater or equal to 992px 70 | }); 71 | 72 | $(window).on('inside-md', function() { 73 | // Do something when viewport is greater or equal to 992px BUT less than 1200px 74 | }); 75 | ``` 76 | 77 | ### Customize Breakpoints 78 | 79 | Set breakpoints based on website/application needs. Note the naming will change the the compare triggers. 80 | 81 | ```js 82 | 83 | $(window).breakpoints({ 84 | breakpoints: [{ 85 | "name": "phone", 86 | "width": 0 87 | }, { 88 | "name": "phone-large", 89 | "width": 420 90 | }, { 91 | "name": "tablet", 92 | "width": 768 93 | }, { 94 | "name": "desktop", 95 | "width": 1024 96 | }, { 97 | "name": "desktop-large", 98 | "width": 1340 99 | }] 100 | }); 101 | 102 | // Compare Trigger 103 | $(window).on('greaterEqualTo-desktop', function() { 104 | // Do something when viewport is greater or equal to 1024px 105 | }); 106 | ``` 107 | 108 | ### Use Namespacing 109 | 110 | Using namespaces will allow unbinding of specific `breakpoint-change` if necessary. 111 | 112 | ```js 113 | $(window).bind("breakpoint-change.megamenu", function(event) { 114 | // Will get unbound 115 | }); 116 | 117 | $(window).bind("breakpoint-change.footer", function(event) { 118 | // Won"t get unbound 119 | }); 120 | 121 | $(window).unbind("breakpoint-change.megamenu"); 122 | ``` 123 | 124 | ### Comparing Specific Breakpoints 125 | 126 | Checking against the current breakpoint and if it matches the criteria execute the callback function. This method is **not** constantly listening for changes, it's a one time check. For constant check see _Constant Check Example_ below or use [comparing triggers](#listening-for-specific-breakpoints-then-execute). See [comparing methods](#comparing-methods) for all available options. 127 | 128 | ```js 129 | // Basic Example 130 | $(window).breakpoints("lessThan", "md", function() { 131 | // If viewport is less than 992px do something here. 132 | }); 133 | 134 | // Constant Check Example 135 | $(window).bind("breakpoint-change", function(event) { 136 | $(window).breakpoints("lessThan", "md", function() { 137 | ... 138 | }); 139 | }); 140 | 141 | // Practical Usage Example 142 | $("button").click(function() { 143 | $(window).breakpoints("lessThan", "sm", function() { 144 | // Use a modal 145 | }); 146 | 147 | $(window).breakpoints("greaterEqualTo", "md", function() { 148 | // Do something else 149 | }); 150 | }); 151 | ``` 152 | 153 | 154 | ## Options 155 | 156 | ### breakpoints 157 | 158 | `array` `default:` 159 | ```json 160 | [ 161 | { 162 | "name": "xs", 163 | "width": 0 164 | }, { 165 | "name": "sm", 166 | "width": 768 167 | }, { 168 | "name": "md", 169 | "width": 992 170 | }, { 171 | "name": "lg", 172 | "width": 1200 173 | } 174 | ] 175 | ``` 176 | 177 | These are the breakpoints to monitor. The default set is aligned with Bootstraps grid system. The width pertains to the lower limit. For example `992px` represents the beginning of `md` until it gets to `1200px`. 178 | 179 | ### buffer 180 | 181 | `integer` `default: 300` 182 | 183 | A buffer is set before breakpoints trigger `breakpoint-change`. The buffer keeps resizing more performant by not triggering actions prematurely. 184 | 185 | ### triggerOnInit 186 | 187 | `boolean` `default: false` 188 | 189 | On initializing Breakpoints after the buffer trigger a `breakpoint-change` so all bindings necessary could happen. This will return the same event object as regular breakpoint change with `event.initalInit`. 190 | 191 | ### outerWidth 192 | 193 | `boolean` `default: false` 194 | 195 | Use `$(window).outerWidth()` over the default `$(window).width()` for window width calculations. 196 | 197 | 198 | ## Methods 199 | 200 | ### getBreakPoint 201 | 202 | Return the current breakpoint name. 203 | 204 | ```js 205 | $(window).breakpoints("getBreakpoint"); 206 | ``` 207 | 208 | ### getBreakpointWidth 209 | 210 | Return the current breakpoint width given the break point name. 211 | 212 | ```js 213 | $(window).breakpoints("getBreakpointWidth", [breakpoint name]); 214 | ``` 215 | 216 | ### destroy 217 | 218 | This will stop ALL breakpoints from listening for changes. To remove a single breakpoint bind see [Use namespacing](#use-namespacing). 219 | 220 | ```js 221 | $(window).breakpoints("destroy"); 222 | ``` 223 | 224 | 225 | ## Comparing Methods 226 | 227 | ### lessThan 228 | 229 | Returns true if the current viewport is less than the breakpoint. 230 | 231 | ```js 232 | $(window).breakpoints("lessThan", [breakpoint name], [callback]); 233 | ``` 234 | 235 | ### lessEqualTo 236 | 237 | Returns `true` if the current viewport is less but also equal to the breakpoint value. 238 | 239 | ```js 240 | $(window).breakpoints("lessEqualTo", [breakpoint name], [callback]); 241 | ``` 242 | 243 | ### greaterThan 244 | 245 | Returns `true` if the current viewport is greater than the breakpoint. 246 | 247 | ```js 248 | $(window).breakpoints("greaterThan", [breakpoint name], [callback]); 249 | ``` 250 | 251 | ### greaterEqualTo 252 | 253 | Returns `true` if the current viewport is greater but also equal to the breakpoint. 254 | 255 | ```js 256 | $(window).breakpoints("greaterEqualTo", [breakpoint name], [callback]); 257 | ``` 258 | 259 | ### inside 260 | 261 | Returns `true` if the current viewport is within the breakpoint and its lower limits. Eg. with the default breakpoints -- If the current viewport width is `900px` this would be `true` for `sm`. This will return `true` for the last (largest) breakpoint while the viewport width is greater than its value. 262 | 263 | ```js 264 | $(window).breakpoints("inside", [breakpoint name], [callback]); 265 | ``` 266 | 267 | 268 | ## Minimum Requirements 269 | 270 | Breakpoints requires jQuery `v1.7` and up. 271 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-breakpoints", 3 | "version": "1.8.1", 4 | "homepage": "https://github.com/jerrylow/breakpoints", 5 | "authors": [ 6 | "jerrylow " 7 | ], 8 | "description": "jQuery Responsive/Breakpoint Optimized Library.", 9 | "main": "jquery.breakpoints.js", 10 | "keywords": [ 11 | "jquery", 12 | "breakpoints", 13 | "responsive" 14 | ], 15 | "license": "MIT" 16 | } 17 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Breakpoints Demo and Documentation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 78 | 79 | 80 | 81 |
82 |

jQuery Breakpoints Demo and Documentation

83 | 84 |

Breakpoints is a light weight jQuery library to detect and manage breakpoint changes. Breakpoint was originally written to optimize large single page sites with too many binds on resize causing performance issues. While still achieving the previous goal it has also been re-written to assist with general breakpoint management.

85 | 86 |

87 | View on Github 88 |

89 | 90 |

Initialize

91 | 92 |

Include breakpoints library after jQuery, then initialize globally or on any page you want to use breakpoints.

93 | 94 | 
<head>
 95 |   <script src="./scripts/jquery.min.js"></script>
 96 |   <script type="text/javascript" src="./scripts/jquery.breakpoints.min.js"></script>
 97 | </head>
98 | 99 | 
$(document).ready(function() {
100 |   $(window).breakpoints();
101 | });
102 | 103 |

Listening for Breakpoint Changes

104 | 105 |

Breakpoints will trigger breakpoint-change when the viewport enters a new breakpoint. The returned event will include from and to on event indicating the previous and new breakpoint. Resize your window to see what happens

106 | 107 |
108 | Current Breakpoint:
109 | Previous Breakpoint: 110 |
111 | 112 | 
$(window).bind('breakpoint-change', function(e) {
113 |   var $outputListening = $('#output-listening');
114 |   $outputListening.find('#output-listening--current').html(e.to);
115 |   $outputListening.find('#output-listening--previous').html(e.from);
116 | });
117 | 118 |

Check Specific Breakpoints

119 | 120 |

Checks only happens once and needs to constantly be re-checked based on the use case. The example below checks onload but resizing won't check again. Notice the box's content won't change. Try resizing then refreshing.

121 | 122 |
123 |
I only show up on XS
124 |
I only show up on SM
125 |
I only show up on MD
126 |
I only show up on LG
127 |
128 | 129 | 
$outputListenExecute = $('#output-listen-execute');
130 | 
131 | function outputListenExecuteHide($parent) {
132 |   $parent.children('div').hide();
133 | }
134 | 
135 | $(window).breakpoints('inside', 'xs', function() {
136 |   outputListenExecuteHide($outputListenExecute);
137 |   $outputListenExecute.find('.output--listen-execute__xs').show();
138 | });
139 | 
140 | $(window).breakpoints('inside', 'sm', function() {
141 |   outputListenExecuteHide($outputListenExecute);
142 |   $outputListenExecute.find('.output--listen-execute__sm').show();
143 | });
144 | 
145 | $(window).breakpoints('inside', 'md', function() {
146 |   console.log('here');
147 |   outputListenExecuteHide($outputListenExecute);
148 |   $outputListenExecute.find('.output--listen-execute__md').show();
149 | });
150 | 
151 | $(window).breakpoints('inside', 'lg', function() {
152 |   outputListenExecuteHide($outputListenExecute);
153 |   $outputListenExecute.find('.output--listen-execute__lg').show();
154 | });
155 | 156 |

A proper use case of checks is when you want to execute different code in an interactive situation, such as a button that may behave differently based on the breakpoint.

157 | 158 |
159 | 160 |
161 | 162 | 
$('.output__btn--check').click(function() {
163 |   $(window).breakpoints('lessThan', 'md', function() {
164 |     alert('Screen is less than 992px');
165 |   });
166 | 
167 |   $(window).breakpoints('greaterEqualTo', 'md', function() {
168 |     alert('Screen is greater or equal to 992px');
169 |   });
170 | });
171 | 172 |

Listening for Breakpoints then Execute

173 | 174 |

If you need to listen for a specific breakpoint before executing code you can listen for compare events that triggers when breakpoints enter and exit thresholds.

175 | 176 |
177 |
I only show up on SM and below
178 |
I only show up on MD and above
179 |
180 | 181 | 
$outputListenExecute = $('#output-listen-execute');
182 | 
183 | $(window).on('lessThan-md', function() {
184 |   outputListenExecuteHide($outputListenExecute);
185 |   $outputListenExecute.find('.output--listen-execute__sm').show();
186 | });
187 | 
188 | $(window).on('greaterEqualTo-md', function() {
189 |   outputListenExecuteHide($outputListenExecute);
190 |   $outputListenExecute.find('.output--listen-execute__md').show();
191 | });
192 | 193 |

194 | 195 | Author: Jerry Low (@jerrylowm) 196 | 197 |

198 |
199 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /demo/styles/styles.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700); 2 | 3 | :root { 4 | --border-radius: 5px; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body { 13 | background: #c0dcf0; 14 | color: #666; 15 | font-family: 'Lato', sans-serif; 16 | line-height: 1.5; 17 | } 18 | 19 | #page { 20 | padding: 50px 100px; 21 | } 22 | 23 | @media only screen and (max-width: 768px) { 24 | #page { 25 | padding: 50px 30px; 26 | } 27 | } 28 | 29 | h1, 30 | h2, 31 | h3, 32 | h4, 33 | h5 { 34 | line-height: 1.2; 35 | font-family: 'Montserrat', sans-serif; 36 | font-weight: normal; 37 | } 38 | 39 | h1 { 40 | color: #1e5b86; 41 | font-size: 3rem; 42 | font-weight: 700; 43 | letter-spacing: -0.01em; 44 | margin-bottom: 0.75em; 45 | text-transform: uppercase; 46 | } 47 | 48 | @media only screen and (max-width: 768px) { 49 | h1 { 50 | font-size: 2.25rem; 51 | margin-top: 0; 52 | } 53 | } 54 | 55 | h2 { 56 | color: #357cad; 57 | font-size: 1.75rem; 58 | margin-bottom: 0.75em; 59 | margin-top: 2em; 60 | } 61 | 62 | h3 { 63 | color: #357cad; 64 | font-size: 1.25rem; 65 | margin-bottom: 0.75em; 66 | margin-top: 2em; 67 | } 68 | 69 | a, 70 | a:visited, 71 | a:active { 72 | color: #5b8e8d; 73 | text-decoration: none; 74 | } 75 | 76 | a:hover { 77 | color: #53bcba; 78 | } 79 | 80 | a.btn { 81 | background: #357cad; 82 | border-radius: var(--border-radius); 83 | color: #ffffff; 84 | display: inline-block; 85 | margin: 0.5em 5px; 86 | padding: 15px 20px; 87 | text-align: center; 88 | width: 160px; 89 | } 90 | 91 | a:hover.btn { 92 | background: #246795; 93 | } 94 | 95 | p { 96 | font-size: 1.125rem; 97 | margin-bottom: 1.5em; 98 | word-break: break-word; 99 | } 100 | 101 | p.center { 102 | text-align: center; 103 | } 104 | 105 | p.credits { 106 | font-size: .8125rem; 107 | margin-top: 6em; 108 | } 109 | 110 | pre { 111 | border: none !important; 112 | margin: 2em 0; 113 | padding: 0; 114 | position: relative; 115 | } 116 | 117 | code { 118 | background: #a8cae2; 119 | border-radius: var(--border-radius); 120 | color: #1f445f; 121 | display: block; 122 | font-size: .875rem; 123 | overflow: auto; 124 | padding: 20px; 125 | } 126 | 127 | @media only screen and (max-width: 768px) { 128 | code { 129 | padding: 20px 15px; 130 | } 131 | } 132 | 133 | .code--inline { 134 | display: inline-block; 135 | padding: 1px 5px; 136 | vertical-align: middle; 137 | } 138 | 139 | code:after { 140 | bottom: 3px; 141 | color: #e4ebeb; 142 | font-family: 'Lato', sans-serif; 143 | font-size: 1rem; 144 | position: absolute; 145 | right: 10px; 146 | text-transform: uppercase; 147 | } 148 | 149 | .code--html:after { 150 | content: 'html'; 151 | } 152 | 153 | .code--css:after { 154 | content: 'css'; 155 | } 156 | 157 | .code--js:after { 158 | content: 'js'; 159 | } 160 | 161 | .code--settings { 162 | background: #f0f6f6; 163 | display: inline-block; 164 | margin: 0 0 0.5em; 165 | padding: 5px; 166 | vertical-align: middle; 167 | } 168 | 169 | h3.code { 170 | color: #636363; 171 | display: inline-block; 172 | height: 32px; 173 | margin: 1em 0.5em 1em 0; 174 | vertical-align: middle; 175 | } 176 | 177 | /* 178 | * Sample 179 | */ 180 | .page { 181 | padding: 30px 0 0; 182 | } 183 | 184 | .output { 185 | border: 2px dashed #70A3E2; 186 | border-radius: var(--border-radius); 187 | padding: 20px; 188 | } 189 | 190 | .output strong span { 191 | text-transform: uppercase; 192 | } 193 | 194 | .output--check div, 195 | .output--listen-execute div { 196 | border-radius: var(--border-radius); 197 | color: white; 198 | display: none; 199 | font-size: 2rem; 200 | padding: 30px; 201 | text-align: center; 202 | } 203 | 204 | .output--check__xs, 205 | .output--listen-execute__xs { 206 | background: #E2989E; 207 | } 208 | 209 | .output--check__sm, 210 | .output--listen-execute__sm { 211 | background: #E1E281; 212 | } 213 | 214 | .output--check__md, 215 | .output--listen-execute__md { 216 | background: #72E280; 217 | } 218 | 219 | .output--check__lg, 220 | .output--listen-execute__lg { 221 | background: #C79EE2; 222 | } 223 | 224 | .output__btn { 225 | background: #8976E2; 226 | border: none; 227 | border-radius: var(--border-radius); 228 | color: white; 229 | padding: 20px; 230 | width: 100%; 231 | } 232 | -------------------------------------------------------------------------------- /jquery.breakpoints.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @license jQuery Breakpoints | MIT | Jerry Low | https://www.github.com/jerrylow/breakpoints 3 | */ 4 | 5 | (function($) { 6 | var Breakpoints = function(el, options) { 7 | var _ = this; 8 | 9 | _.n = "breakpoints"; 10 | _.settings = {}; 11 | _.currentBp = null; 12 | 13 | _.getBreakpoint = function() { 14 | var winW = _windowWidth(); 15 | var bps = _.settings.breakpoints; 16 | var bpName; 17 | 18 | bps.forEach(function(bp) { 19 | if (winW >= bp.width) { 20 | bpName = bp.name; 21 | } 22 | }); 23 | 24 | // Fallback to largest breakpoint. 25 | if (!bpName) { 26 | bpName = bps[bps.length - 1].name; 27 | } 28 | 29 | return bpName; 30 | }; 31 | 32 | _.getBreakpointWidth = function(bpName) { 33 | var bps = _.settings.breakpoints; 34 | var bpWidth; 35 | 36 | bps.forEach(function(bp) { 37 | if (bpName == bp.name) { 38 | bpWidth = bp.width; 39 | } 40 | }); 41 | 42 | return bpWidth; 43 | }; 44 | 45 | _.compareCheck = function(check, checkBpName, callback) { 46 | var winW = _windowWidth(); 47 | var bps = _.settings.breakpoints; 48 | var bpWidth = _.getBreakpointWidth(checkBpName); 49 | var isBp = false; 50 | 51 | switch (check) { 52 | case "lessThan": 53 | isBp = winW < bpWidth; 54 | break; 55 | case "lessEqualTo": 56 | isBp = winW <= bpWidth; 57 | break; 58 | case "greaterThan": 59 | isBp = winW > bpWidth; 60 | break; 61 | case "greaterEqualTo": 62 | isBp = winW > bpWidth; 63 | break; 64 | case "inside": 65 | var bpIndex = bps.findIndex(function(bp) { 66 | return bp.name === checkBpName; 67 | }); 68 | 69 | if (bpIndex === bps.length - 1) { 70 | isBp = winW > bpWidth; 71 | } else { 72 | var nextBpWidth = _.getBreakpointWidth(bps[bpIndex + 1].name); 73 | isBp = winW >= bpWidth && winW < nextBpWidth; 74 | } 75 | break; 76 | } 77 | 78 | if (isBp) { 79 | callback(); 80 | } 81 | }; 82 | 83 | _.destroy = function() { 84 | $(window).unbind(_.n); 85 | }; 86 | 87 | var _compareTrigger = function() { 88 | var winW = _windowWidth(); 89 | var bps = _.settings.breakpoints; 90 | var currentBp = _.currentBp; 91 | 92 | bps.forEach(function(bp) { 93 | if (currentBp === bp.name) { 94 | if (!bp.inside) { 95 | $(window).trigger('inside-' + bp.name); 96 | bp.inside = true; 97 | } 98 | } else { 99 | bp.inside = false; 100 | } 101 | 102 | if (winW < bp.width) { 103 | if (!bp.less) { 104 | $(window).trigger('lessThan-' + bp.name); 105 | bp.less = true; 106 | bp.greater = false; 107 | bp.greaterEqual = false; 108 | } 109 | } 110 | 111 | if (winW >= bp.width) { 112 | if (!bp.greaterEqual) { 113 | $(window).trigger('greaterEqualTo-' + bp.name); 114 | bp.greaterEqual = true; 115 | bp.less = false; 116 | } 117 | 118 | if (winW > bp.width) { 119 | if (!bp.greater) { 120 | $(window).trigger('greaterThan-' + bp.name); 121 | bp.greater = true; 122 | bp.less = false; 123 | } 124 | } 125 | } 126 | }); 127 | }; 128 | 129 | var _windowWidth = function() { 130 | var win = $(window); 131 | 132 | if (_.outerWidth) { 133 | return win.outerWidth(); 134 | } 135 | 136 | return window.innerWidth ? window.innerWidth : win.width(); 137 | } 138 | 139 | var _resizeCallback = function() { 140 | var newBp = _.getBreakpoint(); 141 | 142 | if (newBp !== _.currentBp) { 143 | $(window).trigger({ 144 | "type" : "breakpoint-change", 145 | "from" : _.currentBp, 146 | "to" : newBp 147 | }); 148 | 149 | _.currentBp = newBp; 150 | } 151 | }; 152 | 153 | // Initiate 154 | var settings = $.extend({}, $.fn.breakpoints.defaults, options); 155 | _.settings = { 156 | breakpoints: settings.breakpoints, 157 | buffer: settings.buffer, 158 | triggerOnInit: settings.triggerOnInit, 159 | outerWidth: settings.outerWidth 160 | }; 161 | 162 | el.data(_.n, this); 163 | _.currentBp = _.getBreakpoint(); 164 | 165 | var resizeThresholdTimerId = null; 166 | 167 | if ($.isFunction($(window).on)) { 168 | $(window).on("resize." + _.n, function(e) { 169 | if (resizeThresholdTimerId) { 170 | clearTimeout(resizeThresholdTimerId); 171 | } 172 | 173 | resizeThresholdTimerId = setTimeout(function(e) { 174 | _resizeCallback(); 175 | _compareTrigger(); 176 | }, _.settings.buffer); 177 | }); 178 | } 179 | 180 | if (_.settings.triggerOnInit) { 181 | setTimeout(function() { 182 | $(window).trigger({ 183 | "type": "breakpoint-change", 184 | "from": _.currentBp, 185 | "to": _.currentBp, 186 | "initialInit": true 187 | }); 188 | }, _.settings.buffer); 189 | } 190 | 191 | setTimeout(function() { 192 | _compareTrigger(); 193 | }, 0); 194 | }; 195 | 196 | $.fn.breakpoints = function(method, arg1, arg2) { 197 | if (this.data("breakpoints")) { 198 | var thisBp = this.data("breakpoints"); 199 | var compareMethods = [ 200 | "lessThan", 201 | "lessEqualTo", 202 | "greaterThan", 203 | "greaterEqualTo", 204 | "inside" 205 | ]; 206 | 207 | if (method === "getBreakpoint") { 208 | return thisBp.getBreakpoint(); 209 | } else if (method === "getBreakpointWidth") { 210 | return thisBp.getBreakpointWidth(arg1); 211 | } else if (compareMethods.indexOf(method) >= 0) { 212 | return thisBp.compareCheck(method, arg1, arg2); 213 | } else if (method === "destroy") { 214 | thisBp.destroy(); 215 | } 216 | 217 | return; 218 | } 219 | 220 | new Breakpoints(this, method); 221 | }; 222 | 223 | $.fn.breakpoints.defaults = { 224 | breakpoints: [ 225 | {"name": "xs", "width": 0}, 226 | {"name": "sm", "width": 768}, 227 | {"name" : "md", "width": 992}, 228 | {"name" : "lg", "width": 1200} 229 | ], 230 | buffer: 300, 231 | triggerOnInit: false, 232 | outerWidth: false 233 | }; 234 | })(jQuery); 235 | -------------------------------------------------------------------------------- /jquery.breakpoints.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @license jQuery Breakpoints | MIT | Jerry Low | https://www.github.com/jerrylow/breakpoints 3 | */ 4 | !function(i){function a(e,t){var u=this;function n(){var t=g(),e=u.settings.breakpoints,n=u.currentBp;e.forEach(function(e){n===e.name?e.inside||(i(window).trigger("inside-"+e.name),e.inside=!0):e.inside=!1,t=e.width&&(e.greaterEqual||(i(window).trigger("greaterEqualTo-"+e.name),e.greaterEqual=!0,e.less=!1),t>e.width&&(e.greater||(i(window).trigger("greaterThan-"+e.name),e.greater=!0,e.less=!1)))})}u.n="breakpoints",u.settings={},u.currentBp=null,u.getBreakpoint=function(){var t,n=g(),e=u.settings.breakpoints;return e.forEach(function(e){n>=e.width&&(t=e.name)}),t=t||e[e.length-1].name},u.getBreakpointWidth=function(t){var n;return u.settings.breakpoints.forEach(function(e){t==e.name&&(n=e.width)}),n},u.compareCheck=function(e,t,n){var r=g(),i=u.settings.breakpoints,a=u.getBreakpointWidth(t),o=!1;switch(e){case"lessThan":o=r jquery.breakpoints.min.js -c -m --comments" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/jerrylow/breakpoints.git" 13 | }, 14 | "keywords": [ 15 | "jquery", 16 | "breakpoints", 17 | "responsive" 18 | ], 19 | "author": "jerrylow", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/jerrylow/breakpoints/issues" 23 | }, 24 | "homepage": "https://github.com/jerrylow/breakpoints#readme" 25 | } 26 | --------------------------------------------------------------------------------