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?
For the blinking function, can you respond in that post so as to avoid confusion?
Oh boy. I’m really not sure …
If you are using $ then you are using jQuery.
I don’t know if it will make a difference, but try adding this at the top of the JavaScript page:
$(document).ready(function () {
“use strict”;
Also add Bootstrap.js to your JavaScript settings, since you are using the CSS:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
I did that already. It works in Code Pen, but won’t work in GitHub…weirdest thing ever!! https://github.com/MtZionCode/MtZionCode.github.io/blob/master/profile.js
https://github.com/MtZionCode/MtZionCode.github.io/blob/master/index.html
Ok, on your index page, you have the jquery link in the header. Try to place it after the last " < / div > "
and before the end body tag.
You do not have the bootstrap.min.js . That should go under the jquery.
On your profile page, you do not have the
$(document).ready(function () {
“use strict”;
before any else on the page.
CodePen supplies a lot of what we ask for, almost automatically. GitHub won’t. You will need to hard code your requests.
See if making these changes on GitHub will help.