You may understand this better by checking the CodePen version.
Going straight to the point, the issue is: when you go to the second or third "slide" (the reddish or bluish colors), and then attempt to resize your window, its interior will become grayish~black. That's not supposed to happen.
The black~gray content must stay within the black~gray "slide", the red in the red one, the blue in the blue one.
I'm making a site which follows this logic, but with images. I made this codepen to simplify since my code is awfully complicated and there's tons of unnecessary code.
I believe the problem is in the if($('body').hasClass('first')){if$(window).resize(function... etc; because the if seems to be ignored since the #glasses div is always gray/black if you resize your window.
Since I'm a beginner in Javascript I don't see anything wrong, in fact I just can't understand why something as simple as a if wouldn't work.
Any help is appreciated. Thanks!
var nums = ['first', 'second', 'third'];
var curr = 0;
$('.next, .prev').on('click', function(e) {
var offset = $(this).hasClass('prev') ? nums.length - 1 : 1;
curr = (curr + offset) % nums.length;
$('body').removeClass();
$('body').addClass(nums[curr]);
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
event.preventDefault();
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
event.preventDefault();
} else {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#f00");
} else {
$("#glasses").css("background", "#6ff");
}
event.preventDefault();
};
})
if ($('body').hasClass('first')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
})
} else if ($('body').hasClass('second')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
})
} else if ($('body').hasClass('third')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
})
}
.slides-navigation a{
top: 50%;
position: fixed;
}
.prev{
left:30px;
position:absolute;
}
.next{
right: 45px;
position:absolute;
}
#glasses{
width: 50%;
height: 450px;
margin: 0 auto;
background: #000;
background-repeat: no-repeat;
background-position: 42% 86%;
}
.first{
border: #000 16px solid;
}
.second{
border: #00f 16px solid;
}
.third{
border: #f00 16px solid;
}
#media screen and (max-width:1367px){
.first{
border: #666 16px solid;
}
.second{
border: #66f 16px solid;
}
.third{
border: #6ff 16px solid;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body class="first">
<div id="glasses"></div>
<nav class="slides-navigation desktop">
Prev>
Next
</nav>
</body>
If I understand the question correctly, the problem revolves around the $(window).resize functions being inside of the if statements, rather than the other way around.
It should look more like this:
$(window).resize(function() {
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
} else if ($('body').hasClass('third')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
}
});
Otherwise your code checks for for the body's class once, applies the resize function for only that class, and never knows to check again.
Your if statement
if ($('body').hasClass
Is only being run once, when the page loads.
You should move this into the next/prev event handler, so it re-calculates the resize event every time.
Related
This code is executing on all instances of .flow-hold and not just the div below the .title-hold with text that matches the ==.
The reason for this is I need to change the ranges that I use for each of the gauge1, gauge2, gauge3 instances. I have tried $('.flow-hold').next(function(){
but this is not working either......many thanx in advance
$('.title-hold').each(function() {
if ($(this).text() == 'gauge1') {
$('.flow-hold').each(function() {
if (parseInt($(this).text()) >= 0.0 && ($(this).text()) <= 100.0) {
$(this).css("background-color", "green");
} else if (parseInt($(this).text()) >= 101.0 && ($(this).text()) <= 200.0) {
$(this).css("background-color", "yellow");
} else if (parseInt($(this).text()) >= 300.0 && ($(this).text()) <= 400.0) {
$(this).css("background-color", "red");
} else {
$(this).css("background-color", "purple");
}
});
} else {
//do nothing
}
});
$('.title-hold').each(function() {
if ($(this).text() == 'gauge2') {
$('.flow-hold').each(function() {
if (parseInt($(this).text()) >= 0.0 && ($(this).text()) <= 250.0) {
$(this).css("background-color", "orange");
} else if (parseInt($(this).text()) >= 251.0 && ($(this).text()) <= 345.0) {
$(this).css("background-color", "pink");
} else if (parseInt($(this).text()) >= 346.0 && ($(this).text()) <= 800.0) {
$(this).css("background-color", "brown");
} else {
$(this).css("background-color", "purple");
}
});
} else {
//do nothing
}
});
.title-hold {
width: 100%;
background: #000;
clear: both;
text-align: center;
color: #fff;
font-size: 18px;
}
.flow-hold {
width: 50%;
float: left;
text-align: center;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>
<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>
<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>
There is no need for multiple loops. Just loop once and upon each loop iteration check all gauge values and act accordingly.
Also, it's simpler to work with CSS classes, rather than setting inline styles.
Additionally, be careful with your >= and <= values. The way you have it, if a value were 100.5, it wouldn't match any condition. You may not be planning on working with decimal values right now, but by changing the range a bit, you are safeguarded for the future.
See comments inline.
$('.title-hold').each(function() {
let text = $(this).text(); // Get the text of the .title-hold element
// Get a reference to the .flow-hold element that follows it.
// .next() with no arguments will return the next sibline element after the current one.
let next = $(this).next();
// Get the text of the .flow-hold element that follows it and convert to a number.
// The pre-pended "+" here forces a conversion of the string to a number.
let num = +next.text();
// Depending on what the text of the current .title-hold element being looped is...
switch(text){
case 'gauge1':
if(num >= 0 && num <= 100){
next.addClass("green");
} else if(num <= 200){ // <-- NOTE: the previous test already handled values <=100
next.addClass("yellow");
} else if(num <= 400){
next.addClass("red");
} else {
next.addClass("purple");
}
break;
case 'gauge2':
if(num >= 0 && num <= 250){
next.addClass("orange");
} else if(num <= 345){
next.addClass("pink");
} else if(num <= 800){
next.addClass("brown");
} else {
next.addClass("purple");
}
break;
case 'gauge3':
// Repeat the if statement from above, but with appropriate tests and classes
break;
}
});
.title-hold {
width: 100%;
background: #000;
clear: both;
text-align: center;
color: #fff;
font-size: 18px;
}
.flow-hold {
width: 50%;
float: left;
text-align: center;
font-size: 18px;
}
/* These classes will be conditionally applied */
.green { background-color:green; }
.yellow { background-color:yellow; }
.red { background-color:red; }
.purple { background-color:purple; }
.orange { background-color:orange; }
.pink { background-color:pink; }
.brown { background-color:brown; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>
<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>
<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>
.next() doesn't take a function argument, you just use it to get the element that you want to act on.
Also, the else if statements don't need to check the lower limits. The <= test in the preceding if ensures that the number is above that limit. Your code was also skipping values between 100.0 and 101.0 -- they would end up in the else at the end.
$('.title-hold').each(function() {
var flowHold = $(this).next('.flow-hold');
var nextVal = parseInt(flowHold.text());
if ($(this).text() == 'gauge1') {
if (nextVal >= 0.0 && nextVal <= 100.0) {
flowHold.css("background-color", "green");
} else if (nextVal <= 200.0) {
flowHold.css("background-color", "yellow");
} else if (nextVal <= 400.0) {
flowHold.css("background-color", "red");
} else {
flowHold.css("background-color", "purple");
}
} else if ($(this).text() == 'gauge2') {
if (nextVal >= 0.0 && nextVal <= 250.0) {
flowHold.css("background-color", "orange");
} else if (nextVal <= 245.0) {
flowHold.css("background-color", "pink");
} else if (nextVal <= 800.0) {
flowHold.css("background-color", "brown");
} else {
flowHold.css("background-color", "purple");
}
}
});
.title-hold {
width: 100%;
background: #000;
clear: both;
text-align: center;
color: #fff;
font-size: 18px;
}
.flow-hold {
width: 50%;
float: left;
text-align: center;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>
<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>
<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>
Here:
const gaugeConfig = {
'gauge1': {
ranges: [
{
min: 0,
max: 100,
color: 'green'
},
{
min: 101,
max: 200,
color: 'yellow'
},
{
min: 300,
max: 400,
color: 'red'
}
],
defaultColor: 'purple'
},
'gauge2': {
ranges: [
{
min: 0,
max: 250,
color: 'orange'
},
{
min: 251,
max: 345,
color: 'pink'
},
{
min: 346,
max: 800,
color: 'brown'
}
],
defaultColor: 'purple'
},
}
function updateColors(flowHold, config) {
flow = parseFloat(flowHold.text());
flowHold.css("background-color", config.defaultColor);
for( var i=0; i < config.ranges.length; i++ ) {
range = config.ranges[i];
if (flow >= range.min && flow <= range.max) {
flowHold.css("background-color",range.color);
break;
}
}
}
$('.flow-hold').each(function() {
flowHold = $(this);
titleHold = flowHold.prev();
title = titleHold.text();
config = gaugeConfig[title];
if (config)
updateColors(flowHold, config);
});
.title-hold {
width: 100%;
background: #000;
clear: both;
text-align: center;
color: #fff;
font-size: 18px;
}
.flow-hold {
width: 50%;
float: left;
text-align: center;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>
<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>
<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>
<div class="title-hold">gauge4</div>
<div class="flow-hold">201</div>
What I need to do to change the colour of my nav bar when I scroll down by a certain amount and reset when I scroll back up. I have tried many different techniques. AKA youtube videos on the subject. But cannot seem to get it to work! I have a 'scrolled' class in my CSS stylesheet with a background color set. But it won't even take my function.
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
});
Google Chrome Dev-Files
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
THANKS SO MUCH!
Not sure what the outermost $(function() {... does, but I think that was the reason the snippet inside did not run.
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
If you intended to use IIFE, immediately invoked function expression, you can do
(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
}());
which also works.
This describes how to implement this in Vanilla JS, also taking care of performance using passive event listeners.
Codepen Links
let navRef = document.querySelector('nav');
document.addEventListener('scroll', () => {
if (window.scrollY > 500) {
navRef.classList.add('scrolled');
} else {
navRef.classList.remove('scrolled');
}
}, { passive: true })
body {
margin: 0;
}
div.container {
background: aliceblue;
height: 10000px;
}
nav {
height: 50px;
background: pink;
position: fixed;
width: 100vw;
transition: background 0.3s ease-in-out;
}
nav.scrolled {
background: #80deea;
}
<div class="container">
<nav></nav>
</div>
I've tried searching for a solution for a while.
So it starts transparent and then as I scroll a certain length it changes to have a background color. The code below is what I have so far
CSS File
header {
padding-top: 10px;
background-color: transparent;
color: white;
position: fixed;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
}
JS in script tags at the bottom of the HTML file
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
window.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
HTML file
<header id="headernavbar">
...
</header>
Any tips on how to go about doing this? I tried using JQuery as well but same results. It doesn't add the class at all. I also cleared cookies and cache before visiting the site and tried multiple browsers with no luck. I was also going to add transition effects after I fixed this issue.
You got it opposite. There's no error but the logic error.
By default your background is already trasparent.
You've set on scroll from top, to remove that class when its not even added.
What you need to fix?
When the document_scrolltop > scroll_distance, you add the class, else remove it.
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('header').addClass('changeColor');
}
} else {
if (!transparent) {
transparent = true;
$('header').removeClass('changeColor');
}
}
});
header {
padding-top: 10px;
background-color: transparent;
color: black;
position: fixed;
border:2px solid;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="headernavbar">
...
</header>
RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANRANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>DOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>
Perhaps you could simplify the code, you can see it working if you paste it in the console of the developer tools
window.addEventListener('scroll', function(e) {
let headerColor = (window.scrollY) > 100 ? 'red' : 'blue';
console.log(headerColor);
});
I want to replace a div id/class when the screen width is at a certain size. So far this is what i have.
if ( $(window).width() < 750) {
$('#floating-control').attr('id','mobilecontrol');
}
Then i read using class rather than id is better. I change thing around so i have this
if ( $(window).width() < 750) {
$('#floating-control').removeClass('floatcontrol').addClass('mobilecontrol');
}
So far none of this worked. I am open to any other suggestions. (jquery or javascript)
Try using this:
$(window).on('resize', function(){
var win = $(this);
if (win.width() < 750) {
$('#floating-control').addClass('mobilecontrol');
$('#floating-control').removeClass('floatcontrol');
}
else
{
$('#floating-control').removeClass('mobilecontrol');
$('#floating-control').addClass('floatcontrol');
}
});
$(window).on('resize', function() {
var win = $(this);
if (win.width() < 514) {
$('#floating-control').addClass('mobilecontrol');
$('#floating-control').removeClass('floatcontrol');
} else {
$('#floating-control').removeClass('mobilecontrol');
$('#floating-control').addClass('floatcontrol');
}
});
.floatcontrol {
background: white;
color: red;
font-size: 1.4em;
}
.mobilecontrol {
background: blue;
color: white;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floating-control" class="floatcontrol">I am text.</div>
I'm trying to make a background fade in when you mouse over a box.
Box1 is the box I mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. I need to add some kind of stop function..
Content is a text that changes in a contentbox when I mouseover. This works fine.
$("#box1").mouseover(function(){
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
});
I've also tried with var, but I still have the same problem. If I mouseover fast, the fading keeps running.
var goeft = 0;
$("#box1").mouseover(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseout(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
Css code -v-
/* CSS Document */
body
{
background-color:#B1EB78;
}
#wrapper
{
border:5px white solid;
border-radius:15px;
background-image:url(../images/mill.jpg);
}
#header
{
height:120px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
#content
{
height:250px;
background-image:url(../images/trans_white.png);
border:1px black solid;
border-radius:5px;
}
#space
{
height:40px;
}
#space2
{
height: 10px;
}
#box1
{
height:250px;
background-image:url(../images/trans_green.png);
}
#background
{
width:100%;
height:100%;
border-radius:9px;
}
.hover1
{
background-color:red;
}
.nohover
{
}
var goeft = 0;
$("#box1").mouseenter(function(){
if(goeft == 0) {
$("#background").switchClass("nohover", "hover1", 500);
$("#content").html(box1);
goeft = 1;
}
});
$("#box1").mouseleave(function(){
$("#background").switchClass("hover1", "nohover", 150);
$("#content").html(content);
goeft = 0;
});
I have no idea about the classes but i think mouseenter and mouseleave are better alternative for mouseout and mouseover