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

blitzkreig · June 25, 2018, 5:22pm

Hi folks,
I have a question in regards to reworking a function: I have two Code Pen links:

At the first link (1), I created two lights, one red and one green. The green light glows as long as the animated slideshow is running, and when a user hovers over on the slides of the slideshow the green light is turned off and a red light glows instead. Also when a user hovers over the content of the “Portfolio” dropdown menu bar, the red light rapidly blinks.

However, in the second Code Pen link (2), I added a function to make the green light blink instead. However, as a result of adding this new function, now when the user hovers over one of the slides of the slideshow, the red light no longer glows. And also, when the user hovers over the content of the “Portfolio” dropdown menu bar, the red light no longer blinks. Can you help me fix this?

Here is my old code:
//part 1: add green light to "Portfolio" menu bar button that operates based on status of animation (glows green) And turn of green light and make red light glow whenmouseover` slideshow
//part 2: make red light blink while mouse is over contents of “Portfolio” button drop-down menu

/part 1/

var showcase = document.querySelector(“figure”);
showcase.addEventListener(“mouseover”, function(){
$(".red").addClass(“glow-red”);
$(".green").removeClass(“glow-green”); });
showcase.addEventListener(“mouseout”, function(){
$(".red").removeClass(“glow-red”);
$(".green").addClass(“glow-green”);
});

/part 2/

var dropdown = document.querySelector(’.dropdown-content’);
dropdown.addEventListener(‘mouseenter’, blinking);
dropdown.addEventListener(‘mouseleave’, stopBlinking);

let isBlinking = false;
var element = $(".red");

function blinking() {
if (!isBlinking) {
isBlinking = true;
var shown = true;
var element = $(".red").addClass(“glow-red”);
interval = setInterval(toggle, 100);

function toggle() {
  if (shown) {
    element.hide();
    shown = false;
  } else {
    element.show();
    shown = true;
  }
}

}
}

function stopBlinking() {
var element = $(".red").removeClass(“glow-red”);
clearInterval(interval)
isBlinking = false;
element.show()
}
`

New addition to code:

`
//make green light blink (while slideshow is running)

var element = $(".glow-green");
var shown = false;
setInterval(toggle, 450);

if(hidden) {
element.show();
shown = true;
} else {
element.hide();
shown = false;
}
`

JM-Mendez · June 25, 2018, 6:36pm

I can’t reproduce your errors with the second link. Namely, the red light blinks when hovering over the drop down, and stays steady when over the slideshow.

blitzkreig · June 25, 2018, 7:17pm

@JM-Mendez, sorry I didn’t save my changes after I made them. But you can see it right here: https://codepen.io/IDCoder/pen/LrQRrw?editors=0110, and then compare that against: https://codepen.io/IDCoder/pen/OWbXLw?editors=0010.

Also, at https://codepen.io/IDCoder/pen/LrQRrw?editors=0110 …only one of the images is blinking even though both images have the same class, and are called by that class name in the javascript function. And then when I add that new function to make the green light blink, that then stops working all together…like OMG!

JM-Mendez · June 25, 2018, 7:25pm

I see it now. But before I try to squash the bug, let’s see if you can find it.

Open up the devtools panel and check the console. There’s an error that pops up. If you comment out those lines, you’ll see that the red light returns to blinking on hover, but the green one stays steady.

Try that and then comment back here if it doesn’t work.

I’m watching the world cup for the next 30 min, so I’ll at least be on the forums for that long.

blitzkreig · June 25, 2018, 7:52pm

I saw a bug that said, "Uncaught Referenceerror: hidden is not defined at …
I commented out

if(hidden) { element.show(); shown = true; } else { element.hide(); shown = false; }

and then the green light stopped blinking and one of the robot hands began blinking (in a weird way) …hmm…I’ll try to figure out something

JM-Mendez · June 25, 2018, 9:26pm

I didn’t get notified cuz you didn’t reply to me. Let me know if you hit any further obstacles, and we’ll get you on track.

blitzkreig · June 25, 2018, 9:57pm

@JM-Mendez, sorry, forgot to mention your name. Wrote up some code and then deleted it lol. So I’m still here. Will start with the simplest first

https://mtzioncode.github.io, I only have one hand image blinking when it should be two, even though both of them have the same class and are then operated on with a javascript function that calls that class…really weird… …
I want to get the green light blinking but preserve the features for the red light that currently exist at: https://codepen.io/IDCoder/pen/OWbXLw?editors=0010 (red light glows when mouseoverslideshow and blinks when mousever/ hover over “Portfolio” button dropdown contents.

I’m thinking that there should be some way to wrap the function below (blinks green light) into the other function (https://codepen.io/IDCoder/pen/LrQRrw?editors=0110)

var element = $(".glow-green");
var shown = false;
setInterval(toggle, 450);

 if(hidden) {
        element.show();
        shown = true;
    } else {
        element.hide();
        shown = false;
    }

current function as of now: https://codepen.io/IDCoder/pen/LrQRrw?editors=0110

/*part 1*/

  var showcase = document.querySelector("figure"); 
  showcase.addEventListener("mouseover", function(){ 
  $(".red").addClass("glow-red"); 
  $(".green").removeClass("glow-green"); }); 
  showcase.addEventListener("mouseout", function(){ 
  $(".red").removeClass("glow-red"); 
  $(".green").addClass("glow-green");  
  });


/*part 2*/

var dropdown = document.querySelector('.dropdown-content');
dropdown.addEventListener('mouseenter', blinking);
dropdown.addEventListener('mouseleave', stopBlinking);

let isBlinking = true;
var element = $(".red");

function blinking() {
  if (!isBlinking) {
    isBlinking = true;
    var shown = true;
    var element = $(".red").addClass("glow-red"); 
    interval = setInterval(toggle, 100);

    function toggle() {
      if (shown) {
        element.hide();
        shown = false;
      } else {
        element.show();
        shown = true;
      }
    }
  }
}


function stopBlinking() {
  var element = $(".red").removeClass("glow-red"); 
  clearInterval(interval)
  isBlinking = false;
  element.show()
}

@JM-Mendez I fixed issue no.1 , so now all that is left is issue no.2

blitzkreig · June 25, 2018, 10:34pm

@camperextraordinaire, thanks for the edit. I’ve been wondering why my code formatting wasn’t working.

JM-Mendez · June 26, 2018, 3:13am

Take a look at your devtools. The right-hand side doesn’t have a class attached like you think. Take a look at the gif below.

https://gfycat.com/SerpentineBlaringKrill?autoplay=0

Ok, so I believe you want the green light to blink, and then stop when the red light starts to blink? If it’s that, I already solved this for you, but let’s see if you can get it yourself.

First, do you use an IDE? I have vscode set up with some extensions, a live server to see your app, and eslint/prettier to help you format and avoid possible javascript edge cases.

If you want, I can help you get set up. I’m a firm believer in practicing like you play. All you’d have to do is copy your code into the files.

Alright, the next tips won’t necessarily fix all your issues. But it should make your code clearer, and because of that hopefully lead you to a solution.

1.

Take a look at the jquery .toggle() method. .toggle() | jQuery API Documentation

You will be able to remove this while using setInterval

function toggle() {
      if (shown) {
        element.hide()
        shown = false
      } else {
        element.show()
        shown = true
      }
    }

2.

I don’t know if this was just temporary while you figured things out, but don’t reuse variable names. Especially since you’re using var which hoists variables. You’ll get weird bugs like that.

Once you use the toggle() method, most of these vars will disappear.

// you assign element here
var element = $('.red')

function blinking() {
  if (!isBlinking) {
    isBlinking = true
    var shown = true
// and reassign here
    var element = $('.red').addClass('glow-red')

3.

Hints:

You are doing the same task for both lights, correct? You should be able to use the same or similar code for both tasks.
they’re just the opposite of each other, right?

Hopefully I gave you enough to think about. Hit me up if something wasn’t clear or you get stuck. Happy Hunting!

blitzkreig · June 26, 2018, 3:05pm

Hi, @JM-Mendez, is there a fee to use this service? Or is it free? Thanks for this inquiry! Also, I will be going over your instructions and problem insight today.

JM-Mendez · June 27, 2018, 1:45am

It’s all free. And the best part is that these are professional developer tools.

In my opinion the best feature is intellisense. Take a look at the gif. How amazing is that?

I set up a github repo with a boilerplate for you. All you have to do is take 15 minutes to install a few things and take off. Just make sure to put all your files inside the dist folder.

Here are the steps. Some you may have already done.

install nodejs
- Download | Node.js
install vscode
- https://code.visualstudio.com/
install vscode extensions
- stylelint https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint
  - warns about css syntax errors
- eslint ESLint - Visual Studio Marketplace
  - warns about javascript syntax errors
  - enforces best practices
- prettier Prettier - Code formatter - Visual Studio Marketplace
  - formats javascript, html and css on file save
  - you can edit .prettierrc if you want to use double quotes and semi-colons (I don’t use them)
download github repo
- GitHub - JM-Mendez/vanilla-js-jquery-boilerplate
open folder in vscode
- open integrated terminal https://code.visualstudio.com/docs/editor/integrated-terminal
- type npm install to install all required packages. This may take a few minutes.

That’s it. Now whenever you want to work. You go back into the terminal and

type npm run watch. Your app will launch in the browser and reload on any file save.
hotkey control + c shuts down the local server.

If you get stuck along the way or something isn’t clear, let me know.

blitzkreig · June 27, 2018, 5:46am

WOW! Amazing stuff! Not sure how much more downloads my 4GB laptop can handle, but I’m gonna try it anyway lol!

JM-Mendez · June 27, 2018, 2:25pm

Sorry, I really should have asked what specs you had.

Space wise you should be fine. All the downloads total no more than 500mb. And that’s including the required npm modules.

But if you’re using something besides windows and mac, then the setup is slightly different.

blitzkreig · July 9, 2018, 8:36am

Hey @JM-Mendez, hi!

Here’s a change of idea at my Code Pen: https://codepen.io/IDCoder/pen/LrQRrw?editors=0010

This is what I came up with to get the green light blinking (used the fade-in/fade-out feature instead):

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

However, the .green class is left blinking after mouseover on the animated slides. So I need to clear the interval for function blink_greenLight() for mouseover on animation slides.

This is my current code for behavior on mouseover:

var showcase = document.querySelector("figure"); 
  showcase.addEventListener("mouseover", function(){ 
  $(".red").addClass("glow-red"); 
  $(".green").removeClass("glow-green"); }); 
  showcase.addEventListener("mouseout", function(){ 
  $(".red").removeClass("glow-red"); 
  $(".green").addClass("glow-green");  
  });

How do I integrate a clearInterval method for for function blink_greenLight() into this?

I tried this code here:

showcase.addEventListener("mouseout", function(){
  function blink_greenLight() {
  clearInterval(myVar);
  }

But this didn’t work
Thanks in advance for your help! Totally appreciated!

JM-Mendez · July 9, 2018, 3:37pm

Nevermind my last post. You are setting a timer in the upper scope named myVar. This sets the lights to blink at the beginning of the script. But you never cancel that timer out.

If you don’t care if it blinks from the start, initialize that timer inside the mouseenter event.

If you want the timer to fire at the start, then

clear it out later on mouseenter inside blinking
then reinitialize it inside the same function.
And then cancel it again on mouseleave inside stopBlinking

Use the mouse events to determine whether the timer is on or off, since those are the elements you’re tracking.

Tell me if this didn’t work or isn’t what you needed.

Glad to see you’re still cracking at it tho!

blitzkreig · July 9, 2018, 6:05pm

@JM-Mendez, this is what I have now:

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() {
   blink_greenLight()
}

After I mouseout off the animation slides, the .green class is still blinking, but the .green-glow class is not. What should happen is that BOTH the .green class and the .green-glow class should stop blinking, LEAVING ONLY the STATIC . green class there.

See current demo here:
Blinking%20light%20issue

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

I’m not entirely sure I follow. So I’m assuming you want this

green light blinking on page load
green light steady on mouseover
green light blinking on mouseout

If that’s what you want, then you need to reinitialize the myVar timer on mouseout

blitzkreig · July 9, 2018, 6:30pm

green light blinking on page load …correct!
green light stop blinking on mouseover (while red light blinks)
green light returns to blinking on mouseout …correct!

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

Then you’re clearing it correctly inside mouseOver, but you’re not restarting the timer inside mouseOut. Reassign myVar to a new timer (set to the same as before)

var myVar = setInterval(/*...*/)

function mouseOut() {
   myVar = setInterval(/*...*/)

}

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…

Topic		Replies	Views
How to Enable Javascript Blinking Light for Hover JavaScript	31	4880	February 2, 2021
Trying to Get Lights On My Button To Turn On JavaScript	26	2228	February 2, 2021
Javascript Mouseout Issue JavaScript	0	866	June 14, 2018
Random images flickering during slideshow using reddit json api JavaScript	7	679	July 25, 2021
Javascript keeps disobeying me	4	507	June 1, 2021

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

1.

2.

3.

Related topics