Re-working a Javascript Function for a Notification Light for Slideshow Animation

blitzkreig · July 9, 2018, 6:36pm

Just did that like so:

var myVar= setInterval(blink_greenLight, 100);
function blink_greenLight() {
  $('.glow-green').fadeOut(100);
    $('.glow-green').fadeIn(100);
}

document.getElementById("showcase").addEventListener("mouseover", mouseOver);
function mouseOver() {
    clearInterval(myVar);
}

document.getElementById("showcase").addEventListener("mouseout", mouseOut);
function mouseOut() {
  myVar = setInterval(blink_greenLight, 100);
}

But if you go here to my link: https://codepen.io/IDCoder/pen/LrQRrw?editors=0110, you will see that after you mouseout off the animation slides, the green dot is still blinking…

JM-Mendez · July 9, 2018, 6:38pm

The code you posted works. The link doesn’t have the same mouseOut

blitzkreig · July 10, 2018, 1:36pm

Hi, @JM-Mendez,

“But if you go here to my link: https://codepen.io/IDCoder/pen/LrQRrw?editors=0110 2, you will see that after you mouseout off the animation slides, the green dot is still blinking…” This comment that I had stated previously, was wrong. That’s supposed to happen.

What I meant to say was, on mouseOver, the green button is no longer blinking with the glowing green color (class = glow-green), but rather the .green class is still blinking (dark green). The button does not become static. Neither the .green-color class or the .green class should be blinking on mouseOver. The button should just be still. That’s the goal.

And , the link I posted (https://codepen.io/IDCoder/pen/LrQRrw?editors=1010) does have the same mouseOut.

JM-Mendez · July 10, 2018, 2:42pm

It looks like you’re running into race conditions because setInterval is asynchronous. If you hover over the dropdown and wait a couple sec, you’ll see it stops. So it’s waiting to finish all the queued calls to setInterval

I also don’t know why, but using jquery’s fadeToggle method allowed me to stop the animation faster. I did have to force display it since jquery modifies the opacity in the style prop and that overrides all classes.

function blink_greenLight() {
  $('.glow-green').fadeToggle(100);
}

document.getElementById("showcase").addEventListener("mouseover", mouseOver);
function mouseOver() {
    clearInterval(myVar);
    $('.glow-green').show()
}

Then another race condition popped up. There is a 50/50 chance at stopping the timer on display: none.

So instead of using jquery for this, I’d say the best solution is to use a class for the strobe effect. Then you could synchronously add/remove the class as needed to avoid race conditions

codepen: https://codepen.io/jmend/pen/ZjErRO

/* from https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text */
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 200ms infinite;
}

then

$('.glow-green').addClass('animate-flicker')

document.getElementById("showcase").addEventListener("mouseover", mouseOver);
function mouseOver() {
  $('.glow-green').removeClass('animate-flicker')
}

document.getElementById("showcase").addEventListener("mouseout", mouseOut);
function mouseOut() {
  $('.glow-green').addClass('animate-flicker')
}

Let me know if that works for you

blitzkreig · July 10, 2018, 3:00pm

I love the idea of using a class for the strobe effect! But check this out. Scroll down to the animated slides, and hover over the slides. Do you see the green button that is blinking? That is what I want to totally eliminate. I’m beginning to wonder if my idea is too complicated and if my goal maybe unacheivable.

Also, I see that when you hover over the content of the drop-down menu, unlike before, the green light stops flashing. I want the green light to keep blinking because it represents the fact that the slideshow animation is still in session.

Thankyou IMMENSELY, for all the help you have given so far!

JM-Mendez · July 10, 2018, 3:16pm

OH! I was troubleshooting the wrong thing. LOL.

In that case, look below. I commented out what you don’t need.
updated codepen: https://codepen.io/jmend/pen/ZjErRO

// start strobe animation
$(".green").addClass("animate-flicker");

// document.getElementById("showcase").addEventListener("mouseover", mouseOver);
// function mouseOver() {
//   $('.glow-green').removeClass('animate-flicker')
// }

// document.getElementById("showcase").addEventListener("mouseout", mouseOut);
// function mouseOut() {
//   $('.glow-green').addClass('animate-flicker')
// }

/*part 1*/

// this tracks the slideshow animation
var showcase = document.querySelector("figure");

showcase.addEventListener("mouseover", function() {
  $(".red").addClass("glow-red");
// remove the animation
  $(".green").removeClass("glow-green").removeClass('animate-flicker')
});

showcase.addEventListener("mouseout", function() {
  $(".red").removeClass("glow-red");
// restart the animation
  $(".green").addClass("glow-green").addClass('animate-flicker')
});

Your welcome. Hopefully you’re also understanding how I reached these solutions. If not, let me know and I’ll explain better.

blitzkreig · July 10, 2018, 3:48pm

@JM-Mendez, wow! Man you GOT it!

Now, upon going over everything, here is what I see. I have a circle element of which, in HTML, the classes are green and glow-green.
In CSS, you added an animation class .animate-flicker.
In javascript/jQuery, you assigned the rule of the animation class (.animate-flicker) to .green.
Then you did this: $(".green").removeClass("glow-green").removeClass('animate-flicker') }); …which removes the .glow-green class from the circle, as well as removes the animation class from that .green class on mouseover of slides in slideshow.
And, then you have this for the mouseoutfunction: $(".green").addClass("glow-green").addClass('animate-flicker')}); This adds the .glow-green class back to the circle element as well as adds the animation class to that .glow-green class.

All in all, a seamless interaction of javascript and CSS working in tandem! So happy! Cheers man!

blitzkreig · July 10, 2018, 4:50pm

@JM-Mendez, unfortunately, now it’s back to the same behavior - in GitHub, even though it works in Code Pen! WTF! LOL…no errors logged in the console either…

See the behavior differences in

Git Hub link: https://mtzioncode.github.io
versus:
https://codepen.io/jmend/pen/ZjErRO

In your Code Pen, the cessation of the blinking goes into effect immediately, but in GitHub, there is a delay, before it goes into effect. Why would that happen in GitHub but not in Code pen?? Weird!

JM-Mendez · July 10, 2018, 6:53pm

I took a look at the sources tab in devtools, and you still have this in your profile.js file

//part A (of Part 1)
  
$(".green").addClass("animate-flicker");
 
// remove this
var myVar= setInterval(blink_greenLight, 100);
function blink_greenLight() {
  $('.glow-green').fadeOut(100);
  $('.glow-green').fadeIn(100);
}

blitzkreig · July 10, 2018, 7:52pm

@JM-Mendez, good Lord! Finally finish with this arduous task! 30 messages later! Haha!
How long have you been programmin/developing with Javascript, and just web in general?

JM-Mendez · July 10, 2018, 8:03pm

Lol. It does get very frustrating at times. Some days I can’t even look at my computer without getting angry. lol

I’ve been learning javascript, well programming period since Jan '17. But I’ve been toying with computers since 2006. Mostly copy pasting stuff to build linux machines and hackintoshes. Some iPhone/android jailbreaking stuff too.

Since I didn’t know any programming I spend most of my days fighting the inspector tools and googling cryptic error messages. Honestly I feel it’s the only reason I’ve been able to pick it up quickly. I guess I learned to troubleshoot before learning to code. lol

But it’s not like it all clicked right away either. I feel there just comes a point where you start seeing the same types of errors. Eventually it all clicks if you stick with it

ilenia · February 2, 2021, 11:40am