We Keep Coding

How to show only on screen with certain width JS

I am using the following code
Screen bigger 999px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) >= 999) {
// Show on screens bigger than 999px
}
</script>
Screen smaller than 767px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 767) {
// Show on screens smaller than 767px
}
</script>
Now my goal is to display somthing inbetween 970 and 768
I have tryed the following code, but this is also visible below 767px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 970) {
// Show on screens from 970 till 768
}
</script>
How can I set this up it will only show on screens from 970 till 768? I can't use CSS.

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( width >=768 && width <= 970){
// do what you need
}
logical AND (&&)

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( width >=768 && width <= 970){
// Show on screens between 768 and 970 px
}
else if (width < 768){
// Show on screens smaller than 768px
}
else if (width > 970){
// Show on screens bigger than 970px
}
else {
// Show other cases
}

Window Resize in jQuery not working correctly

I have the jQuery function below that is meant to remove a class on window load and resize if the width is greater than 992 px and add a class if its less than 992px.
It seems to be working fine however the class stays added if i increase the window size from 992 to 1010px. At 1011px it is removed.
jQuery(document).ready(function($){
$(window).on('resize', function() {
if($(window).width() > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});

I wrestled with something similar a while back. Here was my kludge fix.
var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
windowHeight = document.body.offsetHeight;
windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
windowHeight = document.documentElement.offsetHeight;
windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
}
if(windowWidth > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}

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.

Slice jquery to default value

if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
How i can reset from slice 0,8 to default when windows greater than 480? Because when resized the slice 0,8 rule still active? I want to default if greater than 480 how can do that?

Try to use classes. It's much more flexible than .css. You need to remove previous class/styles before you slice and assign new:
if ($(window).width() >= 320 && $(window).width() <= 480) {
$projects.removeClass('md').slice(0, 8).addClass('sm');
} else if ($(window).width() > 480) {
$projects.removeClass('sm').slice(3, 6).addClass('md');
};
Demo: http://jsfiddle.net/96Rxg/
Also consider caching $('.projects'), you don't want to select it on each of resize event fire.

var $projects = $(".projects");
if ($(window).width() >= 320 && $(window).width() <= 480) {
$projects.slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$projects.slice(3, 6).css("margin", "10px");
};