A simple way of detecting changes in currently active breakpoint, as well as executing breakpoint-specific JavaScript code.
A Pen by Maciej Gurban on CodePen.
Last active
April 29, 2024 19:17
-
-
Save maciej-gurban/9998047 to your computer and use it in GitHub Desktop.
A Pen by Maciej Gurban.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta http-equiv="X-UA-Compatible" content=="IE=edge"/> | |
| <meta name=viewport content="width=device-width, initial-scale=1"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>How to detect breakpoints in Twitter Bootstrap using JavaScript (and execute custom code whenever active breakpoint changes)</title> | |
| <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="example-wrapper"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> | |
| <h4><strong>How to detect breakpoints in Twitter Bootstrap using JavaScript </strong></h4> | |
| (and execute custom code whenever active breakpoint changes)<br/><br/> | |
| <p>In this example <em>active breakpoint</em> box will increase its width using JavaScript function whenever the smallest (xs) breakpoint is detected.</p> | |
| <p>Resize your browser's width to see it working</p> | |
| <p>Active breakpoint: <div class="breakpoint-alias"></div></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- mandatory --> | |
| <div class="device-xs visible-xs"></div> | |
| <div class="device-sm visible-sm"></div> | |
| <div class="device-md visible-md"></div> | |
| <div class="device-lg visible-lg"></div> | |
| <!-- end mandatory --> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($){ | |
| /* | |
| * A lightweight window resize listener | |
| */ | |
| var waitForFinalEvent = function(){var b={};return function(c,d,a){a||(a="I'm a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}(); | |
| /* | |
| * @returns | |
| * true - if page is currently using the breakpoint specified as argument | |
| * false - if otherwise | |
| */ | |
| function isBreakpoint( alias ) { | |
| return $('.device-' + alias).is(':visible'); | |
| } | |
| /* | |
| * Main window resize listener | |
| * Executes each time window has been resized | |
| */ | |
| $(window).resize(function () { | |
| waitForFinalEvent(function(){ | |
| if (isBreakpoint('xs')) { | |
| $('.breakpoint-alias').animate({'width': '150px'}, 300); | |
| } else { | |
| $('.breakpoint-alias').animate({'width': '50px'}, 300); | |
| } | |
| }, 300, new Date().getTime()) | |
| }); | |
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * None of the CSS in this example is necessary for the script to work properly. The only required CSS is the one shipped with Bootstrap. | |
| */ | |
| /* This example's styling */ | |
| .breakpoint-alias { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| color: #fff; | |
| background-color: #238cce; | |
| width: 50px; | |
| text-align: center; | |
| } | |
| h4 { | |
| margin-bottom: 0!important; | |
| } | |
| @media (max-width: 767px) { | |
| .breakpoint-alias:before { | |
| content: 'XS '; | |
| } | |
| } | |
| @media (min-width: 768px) and (max-width: 983px) { | |
| .breakpoint-alias:before { | |
| content: 'SM '; | |
| } | |
| } | |
| @media (min-width: 984px) and (max-width: 1199px) { | |
| .breakpoint-alias:before { | |
| content: 'MD '; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .breakpoint-alias:before { | |
| content: 'LG '; | |
| } | |
| } |
@leolux http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed/4541963#4541963
It's not a resize listener. It's a timer
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Why do we need this akward looking window resize listener?