We Keep Coding

Why doesn't this JS work? (window.scrollTop)

The class 'stuck-sm' is added, but 'stuck-md' is not.
if ($(window).scrollTop() >= 285) {
$('.something').addClass('stuck-sm');
} else if ($(window).scrollTop() >= 430) {
$('.something').addClass('stuck-md');
} else {
$('.something').removeClass('stuck-sm','stuck-md');
}

else if is reachable only if the value is less than 285 which means second else if block won't get execute. Below is the correct solution.
if ($(window).scrollTop() >= 430) {
$('.something').addClass('stuck-md');
} else if ($(window).scrollTop() >= 285) {
$('.something').addClass('stuck-sm');
} else {
$('.something').removeClass('stuck-sm','stuck-md');
}

How to fix jQuery multiple else if statements not working

I am trying to run this function but it doesn't reach the first else if when I reach the specified screen size, it will continue to use the first if.
$(window).resize(function() {
function removeClass() {
$('#cookbook_add').removeClass('st-remove-label');
$('#email_page').removeClass('st-remove-label');
}
function addClass() {
$('#cookbook_add').addClass('st-remove-label');
$('#email_page').addClass('st-remove-label');
}
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth < 1150) {
console.log('1150');
addClass();
} else if (lastWidth < 975) {
console.log('975');
removeClass();
} else if (lastWidth < 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}
addRemoveLabel();
});
I expect the console logs to fire when the screen is that size, but it doesn't.

You should specify a range greater than and lower than for each of the if statements
$(window).resize(function() {
function removeClass() {
$('#cookbook_add').removeClass('st-remove-label');
$('#email_page').removeClass('st-remove-label');
}
function addClass() {
$('#cookbook_add').addClass('st-remove-label');
$('#email_page').addClass('st-remove-label');
}
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth < 1150 && lastWidth > 975) {
console.log('1150');
addClass();
} else if (lastWidth < 975 && lastWidth > 680) {
console.log('975');
removeClass();
} else if (lastWidth < 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}
addRemoveLabel();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
JSFiddle: https://jsfiddle.net/on0pet6g/

The problem is that the first if will be reached with any number < 1150... so 975 is < than 1150, 680 is < than 1150.
The best way is to compare the lowest values first like that:
if (lastWidth < 680) {
console.log('680');
addClass();
}
else if (lastWidth < 975) {
console.log('975');
removeClass();
}
else if (lastWidth < 1150) {
console.log('1150');
addClass();
}
else {
removeClass();
}
Just change the order.

Change the function to
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth <= 1150 && lastWidth > 975) {
console.log('1150');
addClass();
} else if (lastWidth <= 975 &&lastWidth > 680) {
console.log('975');
removeClass();
} else if (lastWidth <= 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}

&& unexpected token on scroll

I'm trying to get this working, but the && isn't working. I'm trying to get bottombutton to display on scroll but be displayed none for everything else unless .yes == display none.
Can someone please help?
Also, how can compact code on these 3 scripts below please?
<script>
$(window).load(function(){
if($('.yes').css('display') == 'none')
{
$('#button').css('display', 'block');
}
});
</script>
<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 300) {
$('#bottombadge').fadeIn();
$('.bottomcta').fadeIn();
$('.bottomandroid').fadeIn();
$('.bottomapple').fadeIn();
/*$('#bottombutton').fadeIn();*/
} else {
$('#bottombadge').fadeOut();
$('.bottomcta').fadeOut();
$('.bottomandroid').fadeOut();
$('.bottomapple').fadeOut();
/*$('#bottombutton').fadeOut();*/
}
});
</script>
<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
**if (y > 300) && ($('.yes').css('display') == 'none'){**
$('#bottombutton').fadeIn();
} else {
$('#bottombutton').fadeOut();
}
});
</script>
Any help is much appreciated on this. Thanks again

You have a syntax error
this:
if (y > 300) && ($('.yes').css('display') == 'none')
should be this:
if ((y > 300) && ($('.yes').css('display') == 'none'))

As Pointy pointed out, your parenthesis are incorrect.
This is the correct format:
if ( condition ) {
...
}
And you're doing:
if (y > 300) && (something_else) {
...
}
Which is basically the same as:
if (y > 300) {
&& (something_else) // Unexpected '&&'!
}
To fix it, wrap it all in parenthesis:
if ( (y > 300) && (something_else) ) {
...
}
You can also join all 3 <script> tags in only one, like so:
<script>
$(window).load(function() {
if ($('.yes').css('display') == 'none') {
$('#button').css('display', 'block');
}
});
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 300) {
$('#bottombadge, .bottomcta, .bottomandroid, .bottomapple').fadeIn();
if (($('.yes').css('display') == 'none')) {
/* (y > 300) AND (display IS "none") */
$('#bottombutton').fadeIn();
} else {
/* (y > 300) AND (display ISN'T "none") */
$('#bottombutton').fadeOut();
}
} else {
/* (y <= 300) */
$('#bottombutton, #bottombadge, .bottomcta, .bottomandroid, .bottomapple').fadeOut();
}
});
</script>

Add class to html depending on screen size

When a screen size is smaller than x-amount of pixels, the HTML should get a class if it is bigger and smaller than an x-amount it should get a different class and so on.
I am using jQuery 2.2.1.
JavaScript
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
$html.removeClass('xs sm md lg');
}
$window.resize(resize).trigger('resize');
});
The problem is, that on page load, it will get the correct class, when resizing the browser the correct class will add, but it won't remove the old class.
http://jsbin.com/jusapucadi/edit?html,js,output
I am using the code from this post:
jquery, add/remove class when window width changes

Your code doesn't work as you return before removing the old class.
Change it like this, by remove the old class before setting the new.
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
$window.resize(resize).trigger('resize');
});

I think you should remove old class in start of the method and remove each class like this:
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
or you can set class attribute to ""
$html.attr("class","");

Use jquery .attr and it automatically removes the other classes , from Jquery
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 768) {
return $html.attr( "class","xs" );
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.attr( "class", "sm" );
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.attr( "class", "md" );
}
else if ($window.width() > 1200) {
return $html.attr( "class", "lg" );
}
}
$window.resize(resize).trigger('resize');
});
.xs body {
background:red;
}
.sm body {
background:blue;
}
.md body {
background:black;
}
.lg body {
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
updated jsbin

/* cache object */
$html = $('html');
$(document).on('resize, ready', function() {
/* initially remove all existing classes */
$html.removeClass('xs sm md lg');
var width = $(window).width();
if (width < 768) {
return $html.addClass('xs');
}else if (width > 768 && width < 992) {
return $html.addClass('sm');
}else if (width > 992 && width < 1200) {
return $html.addClass('md');
}else{
return $html.addClass('lg');
}
});

change src of img with js

Using following code the src of image changes only between "width-1.gif" and "width-2.gif". How to fix this code to give the src also value of "width-3.gif" and "width-4.gif" when window width has resized?
var img = document.getElementById('img');
var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth <= 992 || document.documentElement.clientWidth >= 871) {
img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth <= 870 || document.documentElement.clientWidth >= 786) {
img.setAttribute('src', 'images/width-3.gif')
} else if (document.documentElement.clientWidth <= 785) {
img.setAttribute('src', 'images/width-4.gif')
}
};
window.addEventListener("resize", changeSize);

Use && instead of ||
var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth <= 992 && document.documentElement.clientWidth >= 871) {
img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
img.setAttribute('src', 'images/width-3.gif')
} else if (document.documentElement.clientWidth <= 785) {
img.setAttribute('src', 'images/width-4.gif')
}
};

You need to change your ORs (||) to ANDs (&&). In the example above, any value below 992 will be satisfied by the first condition document.documentElement.clientWidth <= 992 and the expression will automatically return true. Try the below instead:
var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth <= 992 && document.documentElement.clientWidth >= 871) {
img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth <= 870 && document.documentElement.clientWidth >= 786) {
img.setAttribute('src', 'images/width-3.gif')
} else if (document.documentElement.clientWidth <= 785) {
img.setAttribute('src', 'images/width-4.gif')
}
};

Your second if statement checks if width<=922 OR width>=871 which is always true for any number. It can be easily fixed by using &&, or, you can just take advantage of nested for loops:
var changeSize = function () {
if (document.documentElement.clientWidth >= 993) {
img.setAttribute('src', 'images/width-1.gif')
} else if (document.documentElement.clientWidth >= 871) {
img.setAttribute('src', 'images/width-2.gif')
} else if (document.documentElement.clientWidth >= 786) {
img.setAttribute('src', 'images/width-3.gif')
} else {
img.setAttribute('src', 'images/width-4.gif')
}
};