detect browser size and apply css for every resolution - javascript

I have this function that I use to apply some css to a menu when browser is resized or when the menu is rendering on different resolutions.
My problem is this, why the browser is not interpreting correctly my function? because when I resize my browser in full mode from half mode the browser interprets only '800-1024' resolution but if I do ctrl+f5 in browser (clear all) interprets correctly my resolution so what is wrong in my function?
function renderMenuCorection(){
if ($('#containerHeader').exists()) {
var resizeObject = {
'0-640': '9px,2px,-3px,12px',
'640-800': '10px,2px,-5px,12px',
'800-1024': '10px,8px,-8px,15px',
'1024-1300': '12px,12px,-13px,11px',
'1300-2000': ',20px,-21px'
}
var win = $(window);
var win_width = win.width();
if (win_width > 0 && win_width <= 640) {
var value = getValueByKey(resizeObject, '0-640');
modifayMenu(value);
}
else
if (win_width > 640 && win_width <= 800) {
var value = getValueByKey(resizeObject, '640-800');
modifayMenu(value);
}
else
if (win_width > 800 && win_width <= 1024) {
var value = getValueByKey(resizeObject, '800-1024');
modifayMenu(value);
alert("I'm on: 800-1024 ," + win_width);
}
else
if (win_width > 1024 && win_width <= 1300) {
var value = getValueByKey(resizeObject, '1024-1300');
modifayMenu(value);
alert("I'm on: 1024-1300 ," + win_width);
}
else
if (win_width > 1300 ) {
var value = getValueByKey(resizeObject, '1300-2000');
modifayMenu(value);
}
}
}
function modifayMenu(value){
var vals = value.split(',')
$('#containerHeader').find('.roundMenuLi').each(function(index, item){
$(item).find('a').css('font-size', vals[0]);
$(item).css('padding-right', vals[1]);
$(item).css('padding-left', vals[1]);
$(item).find('#secondUl').css('margin-left', vals[2]);
$(item).css('padding-bottom', vals[3]);
});
}
function getValueByKey(obj, myKey){
$.each(obj, function(key, value){
if (key == myKey) {
returnValue = value;
}
});
return returnValue;
}
Thank you !

Use CSS3 and its media queries. Example:
#media (max-width: 500px) {
/* some CSS for small resolution */
}
#media (min-width: 1000px) {
/* some CSS for large resolution */
}

you main you want to create a responsive design this link can help you.
building responsive design you must consider
Flexible Grid
Flexible Images
Media Quires
/* below code play important part of your responsive design without that you cannot achieve what you want */
<meta name="viewport" content="width=device-width" /> /* put this before the end tag of head */
#media (max-width: 320px) {
}
#media (min-width: 720px) {
}

It's hard to tell from your code, but most likely you are only calling the function once on pageload. In order to make this do what you want, you will have to attach an event listener and call the code each time the window is resized.
As commented above, consider researching Responsive Web Design to utilize native browser functionality so you don't have to roll your own script to do this. A good place to start is an A List Apart article under the same name.

Media-queries are the best solution as Pavel remarks, besides they're much faster than all the access to the DOM you're making using your code.
The compatibility problem with IE8 can be solved using a JavaScript pluging called Respond.js. Haven't tried it but it seems a good solution to your problem.

Related

A javascript function to be executable on a specific screen size

Is it possible?
I have the following javascript function
<a onclick="execute()">Click here</a>
function execute(){
//code goes here
}
I would like that the onclick event to be only active when the screen size is below 768, so it's only relevant on mobile devices and so on.
Is it possible? and how do you achieve this?
It's totally possible. You'd probably want to do it in the execute function, otherwise when someone clicks on a larger size, there would be a ReferenceError (execute is not defined).
function execute () {
var width = window.innerWidth
if (width >= 768) return
// rest of code here
}
function execute(){
if(screen.width <= 768) {
//code goes here
}
}
Reference: https://www.w3schools.com/jsref/prop_screen_width.asp
Could also use a media query with CSS
#media only screen and (max-width: 768px) {
a {
display: none;
}
}
Media Queries

$(window).resize(); not working as expected [duplicate]

This question already has answers here:
$(window).resize(); doesn't work
(5 answers)
Closed 7 years ago.
I want on set of functionality to be used on screen sizes larger than 768px and another set to be used on everything smaller than that. I need the .resize() so I can know when a user is turning their tablet or phone between landscape and portrait views.
The code on the inside of the .resize() event works fine if i refresh the page but it's as if the event isn't being triggered. Any thoughts?
<script>
jQuery(document).ready(function($){
function mobileFilterMenu(){
var screenTest = $(window).width();
if (screenTest >= 769){
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('.inventory-search > .col-md-9').offset().top,
distance = (elementOffset - scrollTop);
if(distance <= 0){
$('.filter-form').css('top', Math.abs(distance));
}else{
$('.filter-form').css('top', 0);
}
});
}else{
var vHeight = $(window).height() - $('#switch').height() - $('#primary-menu-toggle').height();
$('.filter-form').css('height', vHeight + 'px');
vTextHeight = vHeight - 20;
$('.wpv-filter-form').css('height', vTextHeight + 'px');
objNegHeight = (vHeight * -1) + 50;
$('.filter-form').css('top', objNegHeight + 'px');
var i;
$('#switch').click(function(){
if (i === 0){
$('.filter-form').css('top', objNegHeight + 'px');
i++;
}else{
$('.filter-form').css('top', '50px');
i = 0;
}
});
}
}
mobileFilterMenu();
$(window).resize(mobileFilterMenu());
});
</script>
Just change this part of your code. This should fix your problem.
$(window).resize(mobileFilterMenu);
Instead of passing mobileFilterMenu(), pass this mobileFilterMenu
The parameter inside the $window.resize should have a function not a function call.
Hope this solves your issue.
You should use media queries to apply CSS based on viewport dimensions not code!
Media queries enable us to create a responsive experience, where
specific styles are applied to small screens, large screens and
anywhere in between. The media query syntax allows for the creation of
rules that can be applied depending on device characteristics.
#media (query) {
/* CSS Rules used when query matches */
}
While there are several different items we can query on, the ones used
most often for responsive web design are min-width, max-width,
min-height and max-height.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
#media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#apply-media-queries-based-on-viewport-size

How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

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'));
}

CSS media queries and jQuery window .width() do not match

For a responsive template, I have a media query in my CSS:
#media screen and (max-width: 960px) {
body{
/* something */
background: red;
}
}
And, I made a jQuery function on resize to log the width:
$(window).resize( function() {
console.log( $(window).width() );
console.log( $(document).width() ); /* same result */
/* something for my js navigation */
}
And there a difference with CSS detection and JS result, I have this meta:
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
I suppose it's due to the scrollbar (15 px). How can I do this better?
You're correct about the scroll bar, it's because the CSS is using the device width, but the JS is using the document width.
What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.
This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
I found following code on http://www.w3schools.com/js/js_window.asp:
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
Practically its working the same way as the answer in #Michael Bird's answer, but it's more easy to read.
Edit: I was looking for a method to give exactly the same width as it is used for css media queries. But the suggested one does not work perfect on Safari with scrollbars, sorry. I ended up using modernizr.js in one central function and in the rest of the code I just check if display type is mobile, tablet or desktop. As I am not interested in the width, this works fine for me:
getDisplayType = function () {
if (Modernizr.mq('(min-width: 768px)')){
return 'desktop';
}
else if (Modernizr.mq('(min-width: 480px)')){
return 'tablet'
}
return 'mobile';
};
window.innerWidth is what you need.
if (window.innerWidth < 768) works for 768 break point in CSS
Workaround that always works and is synced with CSS media queries.
Add a div to body
<body>
...
<div class='check-media'></div>
...
</body>
Add style and change them by entering into specific media query
.check-media{
display:none;
width:0;
}
#media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
Then in JS check style that you are changing by entering into media query
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
So generally you can check any style that is being changed by entering into specific media query.
My experience was that the media query width tracks document.body.clientWidth. Because of a vertical scroll bar coming and going, checking document, window, or viewport().width could cause my Javascript to run late--after the media query rule change, depending on the height of the window.
Checking document.body.clientWidth allowed my script code to execute consistently at the same time the media query rule took effect.
#media (min-width:873px) {
//some rules
}
...
if ( document.body.clientWidth >= 873) {
// some code
}
The Andy Langton code put me onto this--thanks!
Hi i use this little trick to get JS and CSS work together easily on responsive pages :
Test the visibility of an element displayed or not on CSS #media size condition.
Using bootstrap CSS i test visibility of a hidden-xs class element
var msg = "a message for U";
/* At window load check initial size */
if ( $('#test-xsmall').is(':hidden') ) {
/* This is a CSS Xsmall situation ! */
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
/* > 768px according to CSS */
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
/* And again when window resize */
$(window).on('resize', function() {
if ($('#test-xsmall').is(':hidden')) {
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
});
#media (min-width: 768px) {
.hidden-xs {
display: block !important;
}
}
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
.redthing-on-xsmall {
/* need a scrollbar to show window width diff between JS and css */
min-height: 1500px;
}
.redthing {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the CSS managed Element that is tested by JS -->
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on #media lower than 767px</span>
<!-- the responsive element managed by Jquery -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on #media max width 767px </div>
Css media query is equal to window.innerWidth. Css Media Queries calculate the scrollbar as well.
The simple and reliable way of doing this is to use Media Queries.
To demonstrate, I want to check if the screen width is greater than or equal to 992px (Bootstrap's large device):
function isLargeDevice() {
if (window.matchMedia("(min-width: 992px)").matches) {
return true;
}
return false;
}
If you are using Modernizer then it's a bit easier, here I want to check if the screen is smaller than Bootstrap's large screen (992px)
function isSmallerThanLargeScreen() {
if (Modernizr.mq('(max-width: 991px)')) {
return true;
}
return false;
}

How to use javascript conditionally like CSS3 media queries, orientation?

How to use javascript conditionally like CSS3 media queries, orientation?
For Example I can write css for specific
#media only screen and (width : 1024px) and (orientation : landscape) {
.selector1 { width:960px}
}
Now I want to only run some javascript if it match the same conditions
like
#media only screen and (width : 1024px) and (orientation : landscape) {
A javascript code here
}
I have a external javascript for example http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js and it should be only run on specific screen size and orientation
You can use window.matchMedia():
Test a mobile device media query
if (matchMedia('only screen and (max-width: 480px)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
}
Test landscape orientation
if (matchMedia('all and (orientation:landscape)').matches) {
// probably tablet in widescreen view
}
Currently supported in all modern browsers (more details)
Polyfill for old browsers:
https://github.com/paulirish/matchMedia.js/
...I want to run a javascript only if max-width of browser is 1900px
and min-width is 768
EDIT: Actually, that was all wrong. If you're using a mobile device, use:
function doStuff(){
landscape = window.orientation? window.orientation=='landscape' : true;
if(landscape && window.innerWidth<1900 && window.innerWidth > 768){
//code here
}
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
window.onorientationchange=doStuff;
}
I can think of a quick solution: Apply some styles conditionally to an invisible div, and check if they are applied with javascript:
div#test { display: none }
#media only screen and (width : 1024px) and (orientation : landscape) {
div#test { background-color: white; }
}
if(document.getElementById('test').style.backgroundColor == 'white')
mediaSelectorIsActive();
It's probably worth mentioning that there is the orientationchange event that you might want to hook into like so:
$('body').bind('orientationchange', function(){
// check orientation, update styles accordingly
});
I know that about this event being fired by mobile Safari, you'd have to check about other browsers.
You could just rewrite the media query as a javascript expression instead:
function sizehandler(evt) {
...
}
function orientationhandler(evt){
// For FF3.6+
if (!evt.gamma && !evt.beta) {
evt.gamma = -(evt.x * (180 / Math.PI));
evt.beta = -(evt.y * (180 / Math.PI));
}
// use evt.gamma, evt.beta, and evt.alpha
// according to dev.w3.org/geo/api/spec-source-orientation
...
}
window.addEventListener('deviceorientation', orientationhandler, false);
window.addEventListener('MozOrientation', orientationhandler, false);
window.addEventListener('load', orientationhandler, false);
window.addEventListener('resize', sizehandler, false);
window.addEventListener('load', sizehandler, false);
The simplest way I found is to get the width of our page; then to conditionally use it.
var x = document.documentElement.clientWidth;
if (x < 992) {
document.body.style.backgroundColor = "yellow";
}

Categories

Resources