We Keep Coding

Compare window.innerWidth using ie/else if

I have created if/else if conditions that should check the window.innerWidth and update a variable. However it's not detecting screen sizes lower than 768.
What have I done wrong? What could I do to make it better, or more efficient, or cleaner?
var ww = window.innerWidth;
var responsiveScale;
if (ww <= 768) {
responsiveScale = 1,
console.log("less than or equal to 768");
} else if (ww > 768 && ww <= 1280) {
responsiveScale = 2,
console.log("screen is greater than 768 but less than or equal to 1280");
} else if (ww > 1280 && ww <= 1440) {
responsiveScale = 3
console.log("screen is greater than 1280 but less than or equal to 1440");
} else if (ww > 1440 && ww <= 1920) {
responsiveScale = 4
console.log("Screen is greater than 1440 but less than or equal to 1920");
} else {
responsiveScale = 5
console.log("Screen is greater 1920");
}

You should to listen for window resize events using
window.onresize = function() {
//compute the window innerWidth here
}

Media queries and height & width defined in variable

I found this plugin online:
https://github.com/frenski/quizy-memorygame
As you can guess, it's a memory game in which you can choose the images to display on the cards. And it's great. But the thing is I'm trying to use media queries to make it more responsive, and it worked great until I realized that the width and height of the cards are defined not only in the CSS but also in a variable.
var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:3, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true };
$('#tutorial-memorygame').quizyMemoryGame(quizyParams);
$('#restart').click(function(){
$('#tutorial-memorygame').quizyMemoryGame('restart');
return false;
});
How can I change the itemWidth and itemHeight depending on the size of the screen? Is that even possible?
I tried using a function like:
if(screen.width <= 480){
//change width and height to this
}else if (screen.width <= 780){
//change width and height to that
}else (screen.width <= 960){
//change width and height to this
}
But it didn't work...
All ideas are welcome! And thank you for your help.

Using if (screen.width <= 480) might not work onload, try use window.matchMedia() to match your CSS media queries:
if (window.matchMedia('(max-width: 480px)').matches) {
//...
} else {
//...
}

try this hope helpful you ....
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 479) {
console.log("screen width is less than 480");
}
else if (windowSize <= 719) {
console.log("screen width is less than 720 but greater than or equal to 480");
}
else if (windowSize <= 959) {
console.log("screen width is less than 960 but greater than or equal to 720");
}
else if (windowSize >= 960) {
console.log("screen width is greater than or equal to 960");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​

jQuery resize and viewport checkpoint

I have a small problem with my script.
I want to change body background colour based on width of screen. My problem is I don't know that I have to change to make it work from under 960 to 1130.
Ex: Let's say I rezise my browser.
1300px -> 1150px = ok
1150px -> 1300px = ok
1150px -> 925px = ok
925px -> 1150px = **not ok**
jQuery script:
$(window).resize(function() {
viewportWidth = $(this).width();
if ( viewportWidth >= 1200 && w < 1200){
$('body').css('background', 'red');
w = viewportWidth;
console.log(w);
}else if (viewportWidth < 1200 && w >= 1200) {
$('body').css('background', 'green');
w = viewportWidth;
console.log(w);
}else if (viewportWidth < 960 && w >= 960) {
$('body').css('background', 'blue');
w = viewportWidth;
console.log(w);
};
}).resize();
JsFiddle:
JsFiddle

Your problem is: When you are under 960, you are passing the window's size to the variable w. When you resize over 960, you are checking if the (viewportWidth < 1200 && w >= 1200) and, of course, the w is less than 1200, as you were in a smaller resolution.
Why are you using that variable anyway?
I suggest just remove it and do it in this way.
$(window).resize(function() {
viewportWidth = $(this).width();
if ( viewportWidth < 960) {
$('body').css('background', 'blue');
} else if (viewportWidth < 1200) {
$('body').css('background', 'green');
} else {
$('body').css('background', 'red');
};
});
EDIT:
As you are using this variable to control your functions, you can still use it, just changing the middle if, like that:
var w = 0;
$(window).resize(function() {
var viewportWidth = $(this).width();
if (viewportWidth < 960 && w >= 960) {
$('body').css('background', 'blue');
} else if (viewportWidth < 1200 && (w < 960 || w >= 1200)) {
$('body').css('background', 'green');
} else if (viewportWidth >= 1200 && w < 1200) {
$('body').css('background', 'red');
};
w = viewportWidth;
});
In this way, you will be able to avoid calling your functions in each resize.
Hope it helps!

If its just for changing the body color you're better off realizing this through pure CSS with the help of media queries.
See this simple example. The only thing you need are 2 media queries:
body {
background-color: blue;
}
#media (min-width: 960px) {
body {
background-color: green;
}
}
#media (min-width: 1200px) {
body {
background-color: red;
}
}
Javascript resize events are a bit trickier. When writing code for those, you should also consider following best practice for better perfomance:
Leaner, Meaner, Faster Animations with requestAnimationFrame.

jQuery Slice resize function

I need a script that makes:
if screen bigger than 480px then do this
(".projects").slice(3, 6).css("margin", "10px");
if screen between 320px and 480px then do this
$(".projects").slice(1, 8).css("margin", "10px");
I saw some scripts but did not really understand how to make this. Can anyone help me with this please?
I need to do this JavaScript because the slice only works with js. I can't do this with css.

Here it is:
var width = screen.width;
if (width >= 320 && width <= 480) {
$(".projects").slice(1, 8).css("margin", "10px");
} else if (width > 480) {
$(".projects").slice(3, 6).css("margin", "10px");
}
To use the window size, use this:
var width = $(window).width();
To do this dinamically on window resize:
$(window).resize(function () {
var width = $(window).width();
$(".projects").css("margin", 0); // you may want to do this to "reset"
if (width >= 320 && width <= 480) {
$(".projects").slice(1, 8).css("margin", "10px");
} else if (width > 480) {
$(".projects").slice(3, 6).css("margin", "10px");
}
});

Do something if screen width is less than 960 px

How can I make jQuery do something if my screen width is less than 960 pixels? The code below always fires the 2nd alert, regardless of my window size:
if (screen.width < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}

Use jQuery to get the width of the window.
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}

You might want to combine it with a resize event:
$(window).resize(function() {
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
});
For R.J.:
var eventFired = 0;
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
eventFired = 1;
}
$(window).on('resize', function() {
if (!eventFired) {
if ($(window).width() < 960) {
alert('Less than 960 resize');
} else {
alert('More than 960 resize');
}
}
});
I tried http://api.jquery.com/off/ with no success so I went with the eventFired flag.

I recommend not to use jQuery for such thing and proceed with window.innerWidth:
if (window.innerWidth < 960) {
doSomething();
}

You can also use a media query with javascript.
const mq = window.matchMedia( "(min-width: 960px)" );
if (mq.matches) {
alert("window width >= 960px");
} else {
alert("window width < 960px");
}

// Adds and removes body class depending on screen width.
function screenClass() {
if($(window).innerWidth() > 960) {
$('body').addClass('big-screen').removeClass('small-screen');
} else {
$('body').addClass('small-screen').removeClass('big-screen');
}
}
// Fire.
screenClass();
// And recheck when window gets resized.
$(window).bind('resize',function(){
screenClass();
});

I would suggest (jQuery needed) :
/*
* windowSize
* call this function to get windowSize any time
*/
function windowSize() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
}
//Init Function of init it wherever you like...
windowSize();
// For example, get window size on window resize
$(window).resize(function() {
windowSize();
console.log('width is :', windowWidth, 'Height is :', windowHeight);
if (windowWidth < 768) {
console.log('width is under 768px !');
}
});
Added in CodePen :
http://codepen.io/moabi/pen/QNRqpY?editors=0011
Then you can get easily window's width with the var : windowWidth
and Height with : windowHeight
otherwise, get a js library :
http://wicky.nillia.ms/enquire.js/

use
$(window).width()
or
$(document).width()
or
$('body').width()

I know i'm late to answer this, but i hope it is of some help to anybody who have similar problem. It also works when page refreshes for any reason.
$(document).ready(function(){
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
$(window).resize(function() {
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
else{
$("#up").show();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
else{
$("#up").show();
}
});});

Try this code
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

My solution for the question using Vanilla JS is,
window.addEventListener("load", function () {
if (window.innerWidth < 960) { doSomething(); }
}
This works, but with one problem, whenever resizing the screen in dev tools, which is a common thing for developers, the function does something will not be fired.
For example, if we display the webpage on a computer with a screen size of more than 1000px, the function will not be fired, and when we resize the windows to less than the target(here 960px) we expect the event to be fired but that is not what happens.
By the time the script file is already processed and finished and will not be re-read, so we need to fire an event whenever we resize the screen and handle that event using "addEventListener", Just like this;
window.addEventListener("resize", (e) => {
const windowWidth = window.innerWidth;
if (windowWidth > 960) { doSomething(); }
if (windowWidth < 960) { doSomething(); }
});
The best practise is to combine both the code-snippets in the project.

Simple and clean solution using Vanilla JavaScript
let app = document.getElementById('app')
const changeColorFn = ( app, color ) => {
app.setAttribute("style",`background: ${color}`)
}
const winSizeFn = ( winWidth, callback, app, color ) => {
if (window.innerWidth < winWidth ) {
callback(app, color);
}
}
winSizeFn( '1200', changeColorFn, app, 'red' )
winSizeFn( '800', changeColorFn, app, 'green' )
winSizeFn( '500', changeColorFn, app, 'blue' )
window.addEventListener("resize", (e) => {
// add winSizeFn here if you want call function on window resize
})
<div id="app">My app content</div>

nope, none of this will work. What you need is this!!!
Try this:
if (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}