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");
}
});
Related
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
}
I am trying to get this code to only work if the device window is bigger than 960px, and it should only trigger when the window scrolls down 700px. The later part works however the first part does not.
The code works perfectly on where it fades in and then fades out, however I do not want it to do so on mobile devices, because the scroll point (700px) is too far down and is creating issues.
$(function () {
var header = $('.fadein');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (($(window).width() < 960) && (scroll >= 700)) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
});
});
I think your main issue is accidentally using < 960 instead of > 960, but you might also change to checking innerWidth rather than width if you really are interested in the window's width and not just the screen's width.
For this demo I reduced the target values to 500 and 200 to work better in a SO snippet. (Resize your browser window and run the snippet again to see it working above and below the 500px threshold.)
console.log("width: " + $(window).innerWidth() );
$(window).scroll(function () {
const
div = document.getElementById("div"),
scroll = $(window).scrollTop();
if ( ($(window).innerWidth() > 500) && (scroll >= 200) ) {
div.style.backgroundColor = "yellow";
}
else {
div.style.backgroundColor = "white";
}
});
#div{ height: 300vh; border: 1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
Did you try to split that if statement ?
For example (second if will fire only if width is at least 960px)
if($(window).width() >= 960) {
if (scroll >= 700) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
}
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);
});
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.
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");
};