Media queries and height & width defined in variable - javascript

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

Related

How do I remove/disable the scrollTop function with JavaScript / jQuery?

I'm trying to write a script that has several variable and functions. The script is for a navbar and it should do the following:
On scroll:change bg from transparent to solid, and change logo img.
On small screens:change bg from transparent to solid, and change logo img.
The problem is that I can get it to work with one or the other but not both.
What happens is the resize works on small screen UNTIL you scroll down and back up. When it hits the top it the background goes back to transparent.
Is there a way to remove the scrollTop function on smaller screens? I feel like removing/disabling this function would fix the problem.
*** Is there a way to do something like this? ***
if (width < 786) {
//REMOVE scrollTop;//?
}
I'm just trying to figure out how to remove the scrollTop function if the screen is small.
I have tried placing the functions in separate scripts, and also using #media css, which comes the closest to working so far, but the "green" logo disappears when scroll hits top.
$(document).ready(function() {
$(window).scroll(function() {
$(window).resize(function() {
var height = $('.first-container').height();
var scrollTop = $(window).scrollTop();
var width = $(window).width();
if (scrollTop >= 0 || width < 768) {
$('.nav-container').addClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-green-sm.png');
} else {
$('.nav-container').removeClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-white-sm.png');
}
});
});
});
Just run this when you want to test the width to remove the function.
if (width < 768) {
scrollTop = function(){};
};
You could just always set scrollTop to 0 if width < 768 instead of calling the scrollTop method :
$(document).ready(function() {
$(window).scroll(function() {
$(window).resize(function() {
var height = $('.first-container').height();
var width = $(window).width();
// Set scrollTop always to 0 if width < 768
var scrollTop = (width < 768) ? 0 : $(window).scrollTop();
if (scrollTop >= 0 || width < 768) {
$('.nav-container').addClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-green-sm.png');
} else {
$('.nav-container').removeClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-white-sm.png');
}
});
});
});
This way if will never execute the second part of your if-statement if width < 768, no matter what the value of scrollTop is.

Issues with $(window).width() and scrolling

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

jQuery: Add and remove a <br> tag depending on window width and whether or not tag already exists

I'm trying to use jQuery to:
check the document width on loading the page AND
check the document width when the user resizes the page.
After checking:
if the document width is greater than 2400px AND the tag with id "lineBreak" doesn't exist, I want to add the "lineBreak" tag in after "#container-3".
if the document width is less than 2400px and the "lineBreak" tag already exists, I want to remove it from the DOM.
My code isn't working - doesn't seem to do anything at all at present... No errors in the console to diagnose the issue with. Furthermore, I suspect there's a simpler way to achieve the desired results.
Many thanks in advance for help fixing this.
$(document).ready(function() {
var windowWidth = $(window).width();
var lineBreakLength = $('#lineBreak').length;
if (windowWidth >= 2400 && lineBreakLength == 0) {
$('#container-3').after('<br id="lineBreak">');
console.log('Window width greater than 2400px. Added <br> tag.');
} else if (windowWidth < 2400 && lineBreakLength > 0) {
$('#lineBreak').remove();
console.log('Window width less than 2400px. Removed <br> tag.');
}
});
$(window).resize(function() {
var windowWidth = $(window).width();
var lineBreakLength = $('#lineBreak').length;
if (windowWidth >= 2400 && lineBreakLength == 0) {
$('#container-3').after('<br id="lineBreak">');
console.log('Window width greater than 2400px. Added <br> tag.');
} else if (windowWidth < 2400 && lineBreakLength > 0) {
$('#lineBreak').remove();
console.log('Window width less than 2400px. Removed <br> tag.');
}
});
#media only screen and (min-width: 2400px) {
.break {display:none;}
}
now in your html:
<br class="break" />
Here is the DEMO
Note that in the demo for easy testing I have changed 2400 to 600
However if you insist on doing it by jQuery(which is not recommended):
if($(document).width() <=2400)
$('.break').css('display','block');
else
$('.break').css('display','none');

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

Categories