I have a style.css with a media query. In my javascript-file, I have a value for the desired mobile-width stored in a variable.
By changing the variable, I want to change the value of the media query automatically. Is it somehow possible to alter the contents of the .css-file with javascript like I can change the DOM?
Adding a HTML <style>-element to the DOM using javascript is not my desired solution, because I want to keep all css in the .css-file
The best option would be to have two sets of media queries which are only applied based on a parent class being present.
#media (max-width: 600px) {
.w600 .myDiv{
color:red;
}
}
#media (max-width: 400px) {
.w400 .myDiv{
color:red;
}
}
You could then add/remove w600 or w400 to the body class to allow the required media query to work.
Using jQuery this could be done like:
$("body").addClass("w600")
.removeClass("w400");
I appreciate you may have more than just one style and would therefore like to reduce code duplication.
In which case you could use a CSS transpiler such as Less with mixins:
#mediaqueryruleset:{
.myDiv{
color:red;
}
.myOtherDiv{
color:blue;
}
}
#media (max-width: 600px) {
.w600 {
#mediaqueryruleset();
}
}
#media (max-width: 400px) {
.w400 {
#mediaqueryruleset();
}
}
Which would output:
#media (max-width: 600px) {
.w600 .myDiv {
color: red;
}
.w600 .myOtherDiv {
color: blue;
}
}
#media (max-width: 400px) {
.w400 .myDiv {
color: red;
}
.w400 .myOtherDiv {
color: blue;
}
}
You can set the rule directly using .media.mediaText of document.styleSheets[0].cssRules
document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;
plnkr http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview
You can write by using $(window).width()
value=959;
if($(window).width() < value)
{
$(".classname").css("color","white");
}
You can use Enquire.js jQuery plugin.
It is a JavaScript library for dealing with media queries in JavaScript.
This is quick start code sample:
enquire.register("screen and (max-width:45em)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},
// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {},
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}
});
Yes. Maybe. Inspired by #guest271314 answer. This seems to allow the changing of the media query conditions via JavaScript.
document.styleSheets[0].cssRules[0].conditionText = "(min-width: 0px)";
Of course, check if the rule has media query applied:
var currentQuery = {index:0,rule:null,mediaText:null};
var inclusionQuery = "(min-width: 0px)";
var exclusionQuery = "(min-width: 99999px)";
var numberOfMediaQueries = 0;
function hideAllMediaQueries() {
var rules = document.styleSheets[0].cssRules;
var firstQueryIndex = 0; // show this query
var queryIndex = 0;
var numberOfRules = rules!=null ? rules.length : 0;
// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];
if (rule.media!=null) {
if (queryIndex==firstQueryIndex) {
currentQuery.mediaText = rule.conditionText;
currentQuery.index = firstQueryIndex;
currentQuery.rule = rule;
rule.conditionText = inclusionQuery;
}
else {
rule.conditionText = exclusionQuery;
}
queryIndex++;
}
}
numberOfMediaQueries = queryIndex;
}
Note: The example above only applies to existing media queries in your CSS. It does not add or remove queries. It checks if media query exists by checking that the rule.media property is not null.
Currently, Twitter Bootstrap 3 have the following responsive breakpoints: 768px, 992px and 1200px, representing small, medium and large devices respectively.
How can I detect these breakpoints using JavaScript?
I would like to listen with JavaScript for all related events triggered when the screen change. And to be able to detect if the screen is for small, medium or large devices.
Is there something already done? What are your suggestions?
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())
});
If you don't have specific needs you can just do this:
if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
}
else {
// do something for huge screens
}
Edit: I don't see why you should use another js library when you can do this just with jQuery already included in your Bootstrap project.
Here my own simple solution:
jQuery:
function getBootstrapBreakpoint(){
var w = $(document).innerWidth();
return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}
VanillaJS:
function getBootstrapBreakpoint(){
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}
Detect responsive breakpoint of Twitter Bootstrap 4.1.x using JavaScript
The Bootstrap v.4.0.0 (and the latest version Bootstrap 4.1.x) introduced the updated grid options, so the old concept on detection may not directly be applied (see the migration instructions):
Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl;
xs grid classes have been modified to not require the infix.
I written the small utility function that respects an updated grid class names and a new grid tier:
/**
* Detect the current active responsive breakpoint in Bootstrap
* #returns {string}
* #author farside {#link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
env = Object.keys(envs)[i];
$el.addClass(envs[env]);
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
};
Detect responsive breakpoint of Bootstrap v4-beta using JavaScript
The Bootstrap v4-alpha and Bootstrap v4-beta had different approach on grid breakpoints, so here's the legacy way of achieving the same:
/**
* Detect and return the current active responsive breakpoint in Bootstrap
* #returns {string}
* #author farside {#link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = ["xs", "sm", "md", "lg"];
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = envs.length - 1; i >= 0; i--) {
env = envs[i];
$el.addClass("d-" + env + "-none");;
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
}
I think it would be useful, as it's easy to integrate to any project. It uses native responsive display classes of the Bootstrap itself.
Have you taken a look at Response.js? It's designed for this kind of thing. Combine Response.band and Response.resize.
http://responsejs.com/
Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});
You could use the window size and hard code the breakpoints. Using Angular:
angular
.module('components.responsiveDetection', [])
.factory('ResponsiveDetection', function ($window) {
return {
getBreakpoint: function () {
var w = $window.innerWidth;
if (w < 768) {
return 'xs';
} else if (w < 992) {
return 'sm';
} else if (w < 1200) {
return 'md';
} else {
return 'lg';
}
}
};
});
Using this approach with Response.js is better. Response.resize triggers on every window resize where crossover will only be triggered if breakpoint is changed
Response.create({
prop : "width",
breakpoints : [1200, 992, 768, 480, 320, 0]
});
Response.crossover('width', function() {
if (Response.band(1200)) {
// 1200+
} else if (Response.band(992)) {
// 992+
} else if (Response.band(768)) {
// 768+
} else if (Response.band(480)) {
//480+
} else {
// 0->320
}
});
Response.ready(function() {
$(window).trigger('resize');
});
There should be no problem with some manual implementation like the one mentioned by #oozic.
Here are a couple of libs you could take a look at:
Response.js - jQuery plugin - make use of html data attributes and also has a js api.
enquire.js - enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries
SimpleStateManager - s a javascript state manager for responsive websites. It is built to be light weight, has no dependencies.
Note that these libs are designed to work independently of bootstrap, foundation, etc. You can configure your own breakpoints and have fun.
You may want to add this to your bootstrap project to check active breakpoint visually
<script type='text/javascript'>
$(document).ready(function () {
var mode;
$('<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>').appendTo('body');
var checkMode = function () {
if ($(window).width() < 768) {
return 'xs';
}
else if ($(window).width() >= 768 && $(window).width() < 992) {
return 'sm';
}
else if ($(window).width() >= 992 && $(window).width() < 1200) {
return 'md';
}
else {
return 'lg';
}
};
var compareMode = function () {
if (mode !== checkMode()) {
mode = checkMode();
$('.mode-informer').text(mode).animate({
bottom: '100'
}, 100, function () {
$('.mode-informer').animate({bottom: 10}, 100)
});
}
};
$(window).on('resize', function () {
compareMode()
});
compareMode();
});
</script>
Here is the BOOTPLY
Building on Maciej Gurban's answer (which is fantastic... if you like this, please just up vote his answer). If you're building a service to query you can return the currently active service with the setup below. This could replace other breakpoint detection libraries entirely (like enquire.js if you put in some events). Note that I've added a container with an ID to the DOM elements to speed up DOM traversal.
HTML
<div id="detect-breakpoints">
<div class="breakpoint device-xs visible-xs"></div>
<div class="breakpoint device-sm visible-sm"></div>
<div class="breakpoint device-md visible-md"></div>
<div class="breakpoint device-lg visible-lg"></div>
</div>
COFFEESCRIPT (AngularJS, but this is easily convertible)
# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module('module').factory 'BreakpointService', ($log) ->
# alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
isBreakpoint: (alias) ->
return $('#detect-breakpoints .device-' + alias).is(':visible')
# returns xs, sm, md, or lg
getBreakpoint: ->
currentBreakpoint = undefined
$visibleElement = $('#detect-breakpoints .breakpoint:visible')
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']]
# note: _. is the lodash library
_.each breakpointStringsArray, (breakpoint) ->
if $visibleElement.hasClass(breakpoint[0])
currentBreakpoint = breakpoint[1]
return currentBreakpoint
JAVASCRIPT (AngularJS)
var myModule;
myModule = angular.module('modules').factory('BreakpointService', function($log) {
return {
isBreakpoint: function(alias) {
return $('#detect-breakpoints .device-' + alias).is(':visible');
},
getBreakpoint: function() {
var $visibleElement, breakpointStringsArray, currentBreakpoint;
currentBreakpoint = void 0;
$visibleElement = $('#detect-breakpoints .breakpoint:visible');
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']];
_.each(breakpointStringsArray, function(breakpoint) {
if ($visibleElement.hasClass(breakpoint[0])) {
currentBreakpoint = breakpoint[1];
}
});
return currentBreakpoint;
}
};
});
Instead of using $(document).width(), you should get set a CSS rule that gives you this information.
I just wrote an article to get it accurately. See it here : http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
Why not just use jQuery to detect the current css width of the bootstrap container class?
ie..
if( parseInt($('#container').css('width')) > 1200 ){
// do something for desktop screens
}
You could also use $(window).resize() to prevent your layout from "soiling the bed" if someone resizes the browser window.
Instead of inserting the below many times into each page...
<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>
Just use JavaScript to dynamically insert it into every page (note that I have updated it to work with Bootstrap 3 with .visible-*-block:
// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
$("<div />", {
class: 'device-' + bootstrapSizes[i] + ' visible-' + bootstrapSizes[i] + '-block'
}).appendTo("body");
}
I don't have enough reputation points to comment but for those who are having problems with getting "unrecognized" when they try using Maciej Gurban's ResponsiveToolKit, I was also getting that error until I noticed that Maciej actually references the toolkit from the bottom of the page in his CodePen
I tried doing that and suddenly it worked ! So, use the ResponsiveToolkit but put your links in the bottom of the page:
I don't know why it makes a difference but it does.
Here is another way to detect the current viewport without putting the viewport size numbers in your javascript.
See css and javascript snippets here: https://gist.github.com/steveh80/288a9a8bd4c3de16d799
After adding that snippets to your css and javascript files you can detect the current viewport like this:
viewport.is('xs') // returns boolean
If you want to detect a viewport range use it like this
viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg
Bootstrap's CSS for the .container class looks like that:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
So this means we can safely rely on jQuery('.container').css('width') to detect breakpoints without the drawbacks of relying on jQuery(window).width().
We can write a function like this:
function detectBreakpoint() {
// Let's ensure we have at least 1 container in our pages.
if (jQuery('.container').length == 0) {
jQuery('body').append('<div class="container"></div>');
}
var cssWidth = jQuery('.container').css('width');
if (cssWidth === '1170px') return 'lg';
else if (cssWidth === '970px') return 'md';
else if (cssWidth === '750px') return 'sm';
return 'xs';
}
And then test it like
jQuery(document).ready(function() {
jQuery(window).resize(function() {
jQuery('p').html('current breakpoint is: ' + detectBreakpoint());
});
detectBreakpoint();
});
Use CSS :before and content property to print the breakpoint state in the <span id="breakpoint-js"> so the JavaScript just have to read this data to turn it as a variable to use within your function.
(run the snippet to see the example)
NOTE: I added a few line of CSS to use the <span> as a red flag in the upper corner of my browser. Just make sure to switch it back to display:none; before pushing your stuff public.
// initialize it with jquery when DOM is ready
$(document).on('ready', function() {
getBootstrapBreakpoint();
});
// get bootstrap grid breakpoints
var theBreakpoint = 'xs'; // bootstrap336 default = mobile first
function getBootstrapBreakpoint(){
theBreakpoint = window.getComputedStyle(document.querySelector('#breakpoint-js'),':before').getPropertyValue('content').replace(/['"]+/g, '');
console.log('bootstrap grid breakpoint = ' + theBreakpoint);
}
#breakpoint-js {
/* display: none; //comment this while developping. Switch back to display:NONE before commit */
/* optional red flag layout */
position: fixed;
z-index: 999;
top: 0;
left: 0;
color: white;
padding: 5px 10px;
background-color: red;
opacity: .7;
/* end of optional red flag layout */
}
#breakpoint-js:before {
content: 'xs'; /* default = mobile first */
}
#media screen and (min-width: 768px) {
#breakpoint-js:before {
content: 'sm';
}
}
#media screen and (min-width: 992px) {
#breakpoint-js:before {
content: 'md';
}
}
#media screen and (min-width: 1200px) {
#breakpoint-js:before {
content: 'lg';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<span id="breakpoint-js"></span>
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
</div>
Bootstrap4 with jQuery, simplified solution
<div class="device-sm d-sm-none"></div>
<div class="device-md d-md-none"></div>
<div class="device-lg d-lg-none"></div>
<div class="device-xl d-xl-none"></div>
<script>
var size = $('.device-xl').is(':hidden') ? 'xl' : ($('.device-lg').is(':hidden') ? 'lg'
: ($('.device-md').is(':hidden') ? 'md': ($('.device-sm').is(':hidden') ? 'sm' : 'xs')));
alert(size);
</script>
I've made a native jQuery method for Twitter Bootstrap screen size detection. Here is:
// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = 'unknown';
$(document).ready(function () {
// <div> objects for all screen sizes required for screen size detection.
// These <div> is hidden for users eyes.
var currentScreenSizeDetectorObjects = $('<div>').css({
'position':'absolute',
'top':'-200px'
}).addClass('current-screen-size').append([
$('<div>').addClass('device-xs visible-xs').html(' '),
$('<div>').addClass('device-sm visible-sm').html(' '),
$('<div>').addClass('device-md visible-md').html(' '),
$('<div>').addClass('device-lg visible-lg').html(' ')
]);
// Attach <div> objects to <body>
$('body').prepend(currentScreenSizeDetectorObjects);
// Core method for detector
function currentScreenSizeDetectorMethod() {
$(currentScreenSizeDetectorObjects).find('div').each(function() {
var className = $(this).attr('class');
if($(this).is(':visible')) {
if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = 'xs';
else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = 'sm';
else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = 'md';
else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = 'lg';
else CurrentBootstrapScreenSize = 'unknown';
};
})
console.log('Current Bootstrap screen size is: '+CurrentBootstrapScreenSize);
$('.CurrentBootstrapScreenSize').first().html('Bootstrap current screen size: <b>' + CurrentBootstrapScreenSize + '</b>' );
}
// Bind screen size and orientation change
$(window).bind("resize orientationchange", function() {
// Execute screen detection
currentScreenSizeDetectorMethod();
});
// Execute screen detection on page initialize
currentScreenSizeDetectorMethod();
});
JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/
JSFillde as fullscreen example: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/
For anyone interested in this, i wrote a breakpoint detection based on CSS breakpoints using TypeScript and Observables. it is not very hard to make ES6 out of it, if you remove the types. In my example i use Sass, but it is also easy to remove this.
Here is my JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>
SCSS:
body::before {
content: 'xs';
display: none;
#media screen and (min-width: 480px) {
content: 's';
}
#media screen and (min-width: 768px) {
content: 'm';
}
#media screen and (min-width: 1024px) {
content: 'l';
}
#media screen and (min-width: 1280px) {
content: 'xl';
}
}
TypeScript:
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
class BreakpointChangeService {
private breakpointChange$: BehaviorSubject<string>;
constructor(): BehaviorSubject<string> {
// initialize BehaviorSubject with the current content of the ::before pseudo element
this.breakpointChange$ = new Rx.BehaviorSubject(this.getBreakpoint());
// observe the window resize event, throttle it and combine it with the BehaviorSubject
Rx.Observable
.fromEvent(window, 'resize')
.throttleTime(0, Rx.Scheduler.animationFrame)
.withLatestFrom(this.breakpointChange$)
.subscribe(this.update.bind(this))
;
return this.breakpointChange$;
}
// method to get the content of the ::before pseudo element
private getBreakpoint(): string {
// see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
return window.getComputedStyle(document.body, ':before').getPropertyValue('content').replace(/[\"\']/g, '');
}
private update(_, recent): void {
var current = this.getBreakpoint();
if(recent !== current) { this.breakpointChange$.next(current); }
}
}
// if the breakpoint changes, react on it
var $result = document.getElementById('result');
new BreakpointChangeService().subscribe(breakpoint => {
$result.innerHTML = Date.now()+': '+breakpoint;
});
I hope this helps somebody.
I was not really satisfied with the given answers, which seem overly complicated to use to me, so I wrote my own solution. However, for the time being this relies on underscore/lodash to work.
https://github.com/LeShrimp/GridSizeEvents
You can use it like this:
GridSizeEvents.addListener(function (newSize, oldSize) {
// Will output eg. "xs -> sm"
console.log(oldSize + ' -> ' + newSize);
});
This works out of the Box for Bootstrap 3, as the breakpoints are hard coded to 768px, 992px and 1200px. For other versions you could easily adapt the code.
Internally this uses matchMedia() and should thus guarantee to produce results that are in synch with Bootstrap.
Maybe it'll help some of you, but there is a plugin which help you to detect on which current Bootstrap v4 breakpoint you are see: https://www.npmjs.com/package/bs-breakpoints
Simple to use (can be used with or without jQuery):
$(document).ready(function() {
bsBreakpoints.init()
console.warn(bsBreakpoint.getCurrentBreakpoint())
$(window).on('new.bs.breakpoint', function (event) {
console.warn(event.breakpoint)
})
})
Here is my solution (Bootstrap 4):
<div class="alert alert-warning row">
<div class="col">
Bootstrap breakpoint is
</div>
<div class="col">
<div class="d-block d-sm-none">
XS
</div>
<div class="d-none d-sm-block d-md-none">
SM
</div>
<div class="d-none d-md-block d-lg-none">
MD
</div>
<div class="d-none d-lg-block d-xl-none">
MD
</div>
<div class="d-none d-xl-block">
MD
</div>
</div>
</div>
For anyone using knockout.js, I wanted some knockout.js observable properties that would tell me when the breakpoints are hit. I opted to use Modernizr's support for css-style media queries so the numbers matched the bootstrap definitions, and to get modernizr's compatibility benefits. My knockout view model is as follows:
var viewModel = function() {
// depends on jquery, Modernizr
var self = this;
self.widthXsOrLess = ko.observable();
self.widthSmOrLess = ko.observable();
self.widthMdOrLess = ko.observable();
var setWindowSizeVars = function() {
self.widthXsOrLess(!Modernizr.mq('(min-width: 768px)'));
self.widthSmOrLess(!Modernizr.mq('(min-width: 992px)'));
self.widthMdOrLess(!Modernizr.mq('(min-width: 1200px)'));
};
$(window).resize(setWindowSizeVars);
setWindowSizeVars();
};
Here is good way to detect it (maybe funny, but works) and You can use necessary element so code is clear:
Example:
css:
#media (max-width: 768px) {
#someElement
{
background: pink
}
}
and in document by jQuery:
if($('#someElement').css('background') == 'pink')
{
doWhatYouNeed();
}
of course css property is any.
Since bootstrap 4 will be out soon I thought I would share a function that supports it (xl is now a thing) and performs minimal jQuery to get the job done.
/**
* Get the Bootstrap device size
* #returns {string|boolean} xs|sm|md|lg|xl on success, otherwise false if Bootstrap is not working or installed
*/
function findBootstrapEnvironment() {
var environments = ['xs', 'sm', 'md', 'lg', 'xl'];
var $el = $('<span />');
$el.appendTo($('body'));
for (var i = environments.length - 1; i >= 0; i--) {
var env = environments[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
$el.remove();
return false;
}
Bootstrap 4
setResponsiveDivs();
function setResponsiveDivs() {
var data = [
{id: 'visible-xs', class: 'd-block d-sm-none'},
{id: 'visible-sm', class: 'd-none d-sm-block d-md-none'},
{id: 'visible-md', class: 'd-none d-md-block d-lg-none'},
{id: 'visible-lg', class: 'd-none d-lg-block d-xl-none'},
{id: 'visible-xl', class: 'd-none d-xl-block'}
];
for (var i = 0; i < data.length; i++) {
var el = document.createElement("div");
el.setAttribute('id', data[i].id);
el.setAttribute('class', data[i].class);
document.getElementsByTagName('body')[0].appendChild(el);
}
}
function isVisible(type) {
return window.getComputedStyle(document.getElementById('visible-' + type), null).getPropertyValue('display') === 'block';
}
// then, at some point
window.onresize = function() {
console.log(isVisible('xs') === true ? 'xs' : '');
console.log(isVisible('sm') === true ? 'sm' : '');
console.log(isVisible('md') === true ? 'md' : '');
console.log(isVisible('lg') === true ? 'lg' : '');
console.log(isVisible('xl') === true ? 'xl' : '');
};
or minified
function setResponsiveDivs(){for(var e=[{id:"visible-xs","class":"d-block d-sm-none"},{id:"visible-sm","class":"d-none d-sm-block d-md-none"},{id:"visible-md","class":"d-none d-md-block d-lg-none"},{id:"visible-lg","class":"d-none d-lg-block d-xl-none"},{id:"visible-xl","class":"d-none d-xl-block"}],s=0;s<e.length;s++){var l=document.createElement("div");l.setAttribute("id",e[s].id),l.setAttribute("class",e[s]["class"]),document.getElementsByTagName("body")[0].appendChild(l)}}function isVisible(e){return"block"===window.getComputedStyle(document.getElementById("visible-"+e),null).getPropertyValue("display")}setResponsiveDivs();
If you use Knockout, then you could use the following custom binding to bind the current viewport breakpoint (xs, sm, md or lg) to an observable in your model. The binding...
wraps the 4 divs with visible-?? class in a div with id detect-viewport and adds it to the body if it doesn't exist already (so you could reuse this binding without duplicating these divs)
sets the current viewport breakpoint to the bound observable by querying which of the divs is visible
updates the current viewport breakpoint when the window is resized
ko.bindingHandlers['viewport'] = {
init: function(element, valueAccessor) {
if (!document.getElementById('detect-viewport')) {
let detectViewportWrapper = document.createElement('div');
detectViewportWrapper.id = 'detect-viewport';
["xs", "sm", "md", "lg"].forEach(function(breakpoint) {
let breakpointDiv = document.createElement('div');
breakpointDiv.className = 'visible-' + breakpoint;
detectViewportWrapper.appendChild(breakpointDiv);
});
document.body.appendChild(detectViewportWrapper);
}
let setCurrentBreakpoint = function() {
valueAccessor()($('#detect-viewport div:visible')[0].className.substring('visible-'.length));
}
$(window).resize(setCurrentBreakpoint);
setCurrentBreakpoint();
}
};
ko.applyBindings({
currentViewPort: ko.observable()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div data-bind="viewport: currentViewPort"></div>
<div>
Current viewport breakpoint: <strong data-bind="text: currentViewPort"></strong>
</div>
<div>
(Click the <em>full page</em> link of this snippet to test the binding with different window sizes)
</div>
It's been a while since the OP, but here's my solution for this using Bootstrap 3. In my use case, I was only targeting rows, but the same could be applied to the container, etc.
Just change .row to whatever you want.
jQuery(document).ready(function ($) {
var alterClass = function () {
var ww = document.body.clientWidth;
if (ww < 768) {
$('.row').addClass('is-xs').removeClass('is-sm').removeClass('is-lg').removeClass('is-md');
} else if (ww >= 768 && ww < 992) {
$('.row').addClass('is-sm').removeClass('is-xs').removeClass('is-lg').removeClass('is-md');
} else if (ww >= 992 && ww < 1200) {
$('.row').addClass('is-md').removeClass('is-xs').removeClass('is-lg').removeClass('is-sm');
} else if (ww >= 1200) {
$('.row').addClass('is-lg').removeClass('is-md').removeClass('is-sm').removeClass('is-xs');
};
};
// Make Changes when the window is resized
$(window).resize(function () {
alterClass();
});
// Fire when the page first loads
alterClass();
});
Here is an idea how to do it using CSS variables.
For Bootstrap 3 (or Bootstrap 4) using CSS:
:root {
--current-breakpoint: xs;
}
#media (min-width: 576px){
:root {
--current-breakpoint: sm;
}
}
#media (min-width: 768px){
:root {
--current-breakpoint: md;
}
}
#media (min-width: 992px){
:root {
--current-breakpoint: lg;
}
}
#media (min-width: 1200px){
:root {
--current-breakpoint: xl;
}
}
Bootstrap 4 and SCSS may look like this:
:root{
#include media-breakpoint-up(xs) {
--current-breakpoint:xs;
}
#include media-breakpoint-up(sm) {
--current-breakpoint:sm;
}
#include media-breakpoint-up(md) {
--current-breakpoint:md;
}
#include media-breakpoint-up(lg) {
--current-breakpoint:lg;
}
#include media-breakpoint-up(xl) {
--current-breakpoint:xl;
}
}
The JS code may be:
window.onresize=()=>{
console.log(getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint'));
}