Hi folks!
I’m trying to get the red and green “Portfolio” button lights to turn on or off based on the status of the animated slideshow. Here is my Code Pen: https://codepen.io/IDCoder/pen/OWbXLw?editors=0010 Below is the code I have so far:
//showcase is the div you click and portfolio is the div whose webkit-animation-play-state is getting changed:
var portfolio = document.getElementByClassName("");
var showcase = document.getElementById("");
showcase.addEventListener("click", function(){ if (blank.style .webkitAnimationPlayState == "paused") { $("red").addClass(".glow-red"); }
else if(blank.style .webkitAnimationPlayState != "paused"){ $("green").addClass(".glow-green"); }
console.log(blank.style .webkitAnimationPlayState); });
`
Can you point me in the right direction? Thanks in advance for your help!
Hi,
I’m not sure exactly what the goal is.
But I do believe that you need to assign a ClassName and Id to call, before you can get the element. If you are calling more than one .getElementByClassName, the you may want to use Tag Name instead.
I’m also not sure what blank.style is…
The goal that I’m trying to achieve is that while the animated slide show is running, (not paused state), the green light on the “Portfolio” button will glow bright green, and when the animation is paused (paused state) by hovering over it with the mouse, the red light on the “Portfolio” button will glow bright red.
…And “blank” is just a filler…haven’t put anything there yet…waiting on a little bit of help haha…
Where is the animation slide show running? What is it’s trigger?
The animated slideshow is in this link, https://codepen.io/IDCoder/pen/OWbXLw?editors=0110 (…a number of scrolling pictures that say, “Coming Soon”.)
Here is the code for the keyframe animation:
`
.Portfolio.Pics figure img{
width: 100%
float: left;
opacity: 0.65;
margin-top: 10px;
}
figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 20s portfolio infinite;
cursor: pointer;
}
`
@keyframes portfolio {
0%{
left: -100%;
}
25%{
left:-50%;
}
50%{
left:-75%;
}
100%{
right:100%;
}
}
figure:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
`
OK. first you need to change the class name from class=“Portfolio Pics” to lowercase one word. Try something like “portfolio-pics”.
Instead of calling “figure”, try to getElementById(“showcase”).
Then $("#portfolio")on.(“click”, function) should act once the portfolio button is clicked. Then you can make an if or switch statement checking to see if it should be red or green. You can addClass(“color”) based on the current situation.
I hope this helps a little.
Thanks for your help…you’re on the right track…I got it to work how I want with some help.
Good. I can’t wait to see when it’s finished.
It’s all done except that both lights glow when the page is loaded…but then after I hover over the slideshow the lights glow the way they should…wierd! Maybe you can help me out here…???
see here: https://codepen.io/IDCoder/full/OWbXLw/
In your html, take out class “red-glow” and “green-glow”. Then it should only show up when you call it in JavaScript.
Let me know if this works.
when I do that then the green button isn’t glowing by default as it shoul…I think I have to add a boolean function
Oh, that was my mistake. If you want green-glow on then leave it as a class inside green, and just removeClass like you did earlier.
But if you want a glow Off, then do not place it in the html because JavaScript will use it first thing.
do a fork of my code, so I can see…I’d def appreciate it…
<div class="red"></div>
<div class="green glow-green"></div>
</div>
So you I think you can leave the JavaScript for it just like it is.
That works perfectly! Now can you take a look at my next question in the javascript blog? Thanks so much!
I’m glad it works 
Where is the other question?
Unfortunately it wont work in GitHub! https://mtzioncode.github.io 
It says, “Cannot read property ‘addEventListener’ of null” and shows a squiggly red line underneath this showcase.addEventListener("mouseover", function(){ (even though it works in Code Pen)!!
Also, my other question is here: https://forum.freecodecamp.org/t/how-to-enable-javascript-blinking-light-for-hover/199828/1
Try changing the addEventListener to .on
So it looks like:
showcase.on(“mouseover” function(){
});
This other one has a slightly different logic…
If we made green-glow by default, and it glowed until the screen changed, then when we click on drop-down we are looking to see if green-glow is still true?
Is this what you are trying to do?