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

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

#1

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

  1. https://codepen.io/IDCoder/pen/OWbXLw?editors=1010

  2. https://codepen.io/IDCoder/pen/LrQRrw?editors=0110

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? :persevere::thinking:

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;
}
`


#2

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.


#3

@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!


#4

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.


#5

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


#6

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.


#7

@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

  1. 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… …

  2. 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


#8

@blitzkreig I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#9

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


#10

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.


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. http://api.jquery.com/toggle/

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!


#11

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.


#12

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.

  1. install nodejs
  2. install vscode
  3. install vscode extensions
  4. download github repo
  5. open folder in vscode

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.


#13

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


#14

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.


#15

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 :tired_face::zipper_mouth_face:
Thanks in advance for your help! Totally appreciated!


#17

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!


#18

@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


#19

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

  1. green light blinking on page load
  2. green light steady on mouseover
  3. green light blinking on mouseout

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


#20
  1. green light blinking on page load …correct!

  2. green light stop blinking on mouseover (while red light blinks)

  3. green light returns to blinking on mouseout …correct!


#21

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(/*...*/)

}