How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Edit: This library is now available through Bower and NPM. See github repo for details.
UPDATED ANSWER:
- Live example: CodePen
- Latest version: Github repository
- Don't like Bootstrap? Check: Foundation demo and Custom framework demos
- Have a problem? Open an issue
Disclaimer: I'm the author.
Here's a few things you can do using the latest version (Responsive Bootstrap Toolkit 2.5.0):
// Wrap everything in an IIFE
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);
As of version 2.3.0, you don't need the four <div>
elements mentioned below.
ORIGINAL ANSWER:
I don't think you need any huge script or library for that. It's a fairly simple task.
Insert the following elements just before </body>
:
<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>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, use the following function:
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}
Now to perform a certain action only on the smallest breakpoint you could use:
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
Detecting changes after DOM ready is also fairly simple. All you need is a lightweight window resize listener like this one:
var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();
var fullDateString = new Date();
Once you're equipped with it, you can start listening for changes and execute breakpoint-specific functions like so:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
}, 300, fullDateString.getTime())
});
Twitter Bootstrap - how to detect when media queries starts
Using jquery you can find the size of current window and then accordingly do your stuff.
$(window).resize(function() {
if ($(this).width() >= 1280) {
//do something
}
else if ($(this).width() < 1280 && $(this).width()>= 980) {
//do something
}
...
});
CSS:: Twitter-Bootsrap-layouts
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Detect Bootstrap's display size from JavaScript
Using the latest version (Responsive Bootstrap Toolkit 2.5.0):
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function(){
if( viewport.is('xs') ) {
// ...
}
})
});
})(jQuery, ResponsiveBootstrapToolkit);
Detect screen width to render appropriate images for breakpoints
I don't know if your goal is to use just PHP but the easiest way is to use CSS.
These are basic media queries, you can change them as you want.
// For small devices
@media (min-width: 576px) {
.imagery {
background-image: url("images/thumbnail-small.jpg");
}
}
// For medium devices
@media (min-width: 768px) {
.imagery {
background-image: url("images/thumbnail-medium.jpg");
}
}
// For large devices
@media (min-width: 992px) {
.imagery {
background-image: url("images/thumbnail-large.jpg");
}
}
// For larger devices
@media (min-width: 1200px) {
.imagery {
background-image: url("images/thumbnail-larger.jpg");
}
}
I got a reference from Bootstrap's page but there are lots of pages and examples.
Related Topics
Is There a JavaScript MVC (Micro-)Framework
Passing Python Data to JavaScript via Django
Difference Between the JavaScript String Type and String Object
Replace All Occurrences in a String
Does JavaScript Process Using an Elastic Racetrack Algorithm
Replace a String in a File with Nodejs
Get the Visible Height of a Div with Jquery
How to Make an Angularjs Directive to Stoppropagation
How to Completely Disable Any Mouse Click
How to Get Index in Handlebars Each Helper
How to Split a String into an Array of Characters
Updating an Input's Value Without Losing Cursor Position
Put JavaScript in One .Js File or Break It Out into Multiple .Js Files
Why Isn't [1,2,3] Equal to Itself in JavaScript