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

Width of list item isn't adjusting past maximum pixel declaration

I have a small script that detects window width and adjusts sub navigation list items if the screen is between 600px and 1200px. The script works within constraints, however when the browser resizes past 1200px or below 600px, the width declaration stays applied to each relevant list item. However, once the page is refreshed the width is what it's supposed to be. First time poster here so please let me know what I'm missing.
Thanks
$(window).resize(function() {
var sub_menu_list_item = $('.current-menu-item .sub-menu li');
var sub_menu_list_item_count = sub_menu_list_item.length;
var divisor = ( 1 / sub_menu_list_item_count );
var width = divisor * 100;
var ww = $(window).width();
if ( ww > 600 && ww < 1200 ){
if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
sub_menu_list_item.css('width', width + '%' );
}
}
});

It appears that you're not applying a width style to the sub-items in the "else" case. That is, when the window width is less than 600px or greater than 1200px. So those items that are sized while the window is within your 600px - 1200px width constraints will remain that way until the page is refreshed.
If you come up with a default case, you can set the width style just like you did in your if body.
$(window).resize(function() {
var sub_menu_list_item = $('.current-menu-item .sub-menu li');
var sub_menu_list_item_count = sub_menu_list_item.length;
var divisor = ( 1 / sub_menu_list_item_count );
var width = divisor * 100;
var ww = $(window).width();
if ( ww > 600 && ww < 1200 ){
if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
sub_menu_list_item.css('width', width + '%' );
}
} else {
sub_menu_list_item.css('width', 'auto' );
}
});

you have to remove the constrain for screen sizes you don't want
if ( ww > 600 && ww < 1200 ){
if ( sub_menu_list_item_count % sub_menu_list_item_count === 0 ){
sub_menu_list_item.css('width', width + '%' );
}
else {
sub_menu_list_item.css('width', 'auto' );
}
}

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

How to get iPad screen width in Javascript

I need to dynamically get the screen size of all mobile devices from a webpage using Javascript.
I have tried this:
//get window's size
if (document.body && document.body.offsetWidth) {
windowsWidth = document.body.offsetWidth;
windowsHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
windowsWidth = document.documentElement.offsetWidth;
windowsHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
windowsWidth = window.innerWidth;
windowsHeight = window.innerHeight;
}
But on iPad I get this size: 980 x 1080 (not the real 768 x 1024).
Thanks
Mauro

Getting the screen dimensions on iPad requires reading the width and height properties of the screen object.
var height = screen.height;
var width = screen.width;
These will provide 768 and 1024 depending on orientation.