Javascript Function Wont Remove Box-Shadow (No Errors in Console)

blitzkreig · June 30, 2018, 11:37pm

Hey folks!

I have a simple problem, but then maybe it’s not so simple

I have a button that I designed (.container-fluid), that I want when pressed, to remove the LED glow from around another element (.circle). I wrote up some javascript code for it, and the console is showing no errors, so I’m confused as to what the problem is. Thanks for your help in advance!

Here’s my current code:

// on mouse press
$(".container-fluid").mousedown(e => { 
  $(".circle").addClass("glow-off")
})

// on up (mouse release)
$(".container-fluid").mouseup(e => {
  $(".circle").removeClass("glow-off")
})

Here is the corresponding HTML and CSS code snippets:
HTML:

<div class="container-fluid">
		<div class="holder">
			<div class="circle">
				<div class="make-it">
					
				</div>
				<div class="vertical-rectangle">
				</div>
			</div>
		</div>
	</div>

CSS:

.container-fluid{
/*border: 1px solid green;*/
width:425px;
height: 425px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}

.container-fluid:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,1);
  color: #000;
}

.holder{
/*border: 1px solid green;*/
width:370px;
height: 370px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.circle{
width:300px;
height: 300px;
border: 30px solid #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: relative;
}

.glow-off{
	box-shadow: none;
}

nicknish · July 1, 2018, 1:08am

Hi again @blitzkreig, are you working inside CodePen, Glitch, or just on your local environment? It’s easier to help when we can see the whole code, so if it’s CodePen/Glitch please share a link!

blitzkreig · July 1, 2018, 1:16am

Hi Nick, great to have you again! And on a weekend!
Here is my jsfiddle: https://jsfiddle.net/MenelikMakonnen/1L7tw8a0/
Oh wow! It works in jsfiddle! But it wasnt working in my browser? Weird!
Also, is it possible to have multiple elements in a mousedown function?

nicknish · July 1, 2018, 1:22am

Of course! I’m trying to “get out there” more and help others.

Thanks for sharing the fiddle. Hmm. I’m not 100% sure what the problem is without seeing it, so hard to say what could have gone wrong.

possible to have multiple elements in a mousedown function?

Can you elaborate what you mean? Maybe this helps: When you use $(".circle") it will select all elements with the circle class.

blitzkreig · July 1, 2018, 1:51am

@nicknish “Can you elaborate what you mean?” Currently I have only .circle as a selector, but I also want to add .vertical-rectangle. is it possible to have both of these as selectors? Or do have to write one function per each?

Also, below, I have posted the code that I had in my Sublime text editor and then of which I opened with my Google Chrome browse (the javascript function to enable the button to remove the box-shadow of the .circle element wasn’t working - except in jsfiddle).

HTML code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="Open Page.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="Open Page.js"></script>
</head>
<body>
	<h4>the EQit Network</h4>
	<div class="container-fluid">
		<div class="holder">
			<div class="circle">
				<div class="make-it">
					
				</div>
				<div class="vertical-rectangle">
				</div>
			</div>
		</div>
	</div>
	</body>
</body>
</html>

 CSS code:

h4{
text-align: center;
color: white;
font-family: “Droid Sans”, “Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
}

.container-fluid{
/border: 1px solid green;/
width:425px;
height: 425px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}

.container-fluid:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,1);
color: #000;
}

.holder{
/border: 1px solid green;/
width:370px;
height: 370px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.circle{
width:300px;
height: 300px;
border: 30px solid #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: relative;
}

.glow-off{
box-shadow: none;
}

.make-it{ /enables shape-form for power button/
height: 0;
width: 80px;
background-color: #000;
border-top: 100px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: absolute;
left: 60px;
top: -40px;
}

/*
.make-it{
height: 0;
width: 120px;
background-color: red;
border-top: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

*/

.vertical-rectangle{
width:50px;
height:200px;
background-color: #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
position: absolute;
border-radius: 5px;
top: -50px;
left:125px;
}

body{
background-color: #000;
}


Javascript code:

$(document).ready(function(){
// on mouse press
$(".container-fluid").mousedown(e => {
$(".circle").addClass(“glow-off”)
})

// on up (mouse release)
$(".container-fluid").mouseup(e => {
  $(".circle").removeClass("glow-off")
})

});


Do you see any errors that could caused my javascript/jquery function to not have been working via my browser?

nicknish · July 1, 2018, 2:13am

To answer your first question:

Yes, you can use two selectors using jQuery. $('.circle', '.rectangle') for example. I knew that from experience but to verify I simply Googled “jquery multiple selectors” and the first search result showed me the jQuery documentation that confirmed it.
Does your JavaScript code run at all? If you add alert('hello') at the top of your JavaScript file does it run? I ask because if your JavaScript works in JSFiddle, then maybe it’s another factor.

blitzkreig · July 1, 2018, 2:20am

Adding alert('hello) is a good idea too. But yeah, I tried that and the alert worked. I then removed it and the javascript worked too…weird…and thanks for the help man!

JM-Mendez · July 1, 2018, 2:23am

Yes. The source attribute should be a valid url, and you have a space in it

<script type="text/javascript" src="Open Page.js"></script>

Either remove the space, or encode it to a url

<script type="text/javascript" src="Open%20Page.js"></script>

nicknish · July 1, 2018, 2:26am

That also triggered alarm bells for me. Curious to hear if that fixes things.

@blitzkreig If that doesn’t work, please check out this CodePen pen where I’ve taken the important bits from your code. I’ve removed the other code so it’s very clear to see what’s happening and how.

https://codepen.io/nicknish/pen/BVMQdx

blitzkreig · July 1, 2018, 2:27am

Wow! You here on the weekend too @JM-Mendez? Haha my man! And interesting, I’ve never had that problem with spaces before!

blitzkreig · July 1, 2018, 2:32am

@nicknish, thanks, will check this out. Also, it’s easy to code in Code Pen or jsFiddle, because these take care of the important stuff. But sometimes when you code in you own desktop editor and then oepn the html files in your browser, it’s a test of how good you really are lol.

Lastly, when I add multiple selectors, the javascript function ceases to execute…

$(document).ready(function(){
	// on mouse press
	$(".container-fluid").mousedown(e => { 
	  $('.circle', '.vertical-rectangle').addClass("glow-off")
	})

	// on up (mouse release)
	$(".container-fluid").mouseup(e => {
	  $('.circle', '.vertical-rectangle').removeClass("glow-off")
	})
});

JM-Mendez · July 1, 2018, 2:32am

Having it work may have actually been a bug, cuz…javascript lol

As long as you’re looking to keep getting better, I’ll keep lurking!

JM-Mendez · July 1, 2018, 2:33am

When you add multiple selectors, make sure that they will match against an actual dom element.

In other words, you can’t select different elements. So check to make sure you’re not doing that.

blitzkreig · July 1, 2018, 2:44am

@JM-Mendez, @nicknish, link here: https://jsfiddle.net/MenelikMakonnen/1L7tw8a0/11/ …it looks like I have my elements selected correctly…js not working though…

JM-Mendez · July 1, 2018, 3:44am

Multiple selectors work like this

1 string
group selectors with a comma

Here you have 2 strings

$('.circle', '.rectangle')

But if you want to select any circle or rectangle class, it must be a single string

$('.circle, .rectangle').addClass("glow-off")

And if you want to match a circle that also has the rectangle class

$('.circle.rectangle').addClass("glow-off")

blitzkreig · July 1, 2018, 4:18am

@JM-Mendez, this is what I have now, and it still won’t work: (https://jsfiddle.net/MenelikMakonnen/1L7tw8a0/)

$(document).ready(function(){
	// on mouse press
	$(".container-fluid").mousedown(e => { 
	   $('.circle, .vertical-rectangle').addClass("glow-off")
	})

	// on up (mouse release)
	$(".container-fluid").mouseup(e => {
	   $('.circle, .vertical-rectangle').removeClass("glow-off")
	})
});

JM-Mendez · July 1, 2018, 4:33am

That jsfiddle works for me. Here’s what I see

What are you expecting to see?

blitzkreig · July 1, 2018, 4:37am

@JM-Mendez, sorry, I should of been more specific. Yes, the outer ring does turn on and off, but the center rectangle should turn on and off too. I’m trying to get the rectangle and the outer ring to turn on and off at the same time via using multiple selectors.

JM-Mendez · July 1, 2018, 5:37am

Ok, what you’re seeing here is a css cascade issue. Remember this,

the css engine reads the file top to bottom
the last css class in the file gets priority.

So when you add the .glow-off class, your .vertical-rectangle class has priority becomes it comes later.

And since your vertical-rectangle class also sets the box-shadow prop, it overrides the .glow-off class.

Take a look at this gif of from the console. Pay particular attention to the styles section on the right. This section lists the styles in descending order of priority. So the top wins.

Here you’ll notice that the class gets added, but then overridden.

blitzkreig · July 1, 2018, 5:44am

@JM-Mendez, yeah, I saw that in the console, when I was checking! I was wondering why it kept doing that. So how do I change that?

I fixed the problem by creating a new class for the rectangle piece like so:

$(document).ready(function(){
	// on mouse press
	$(".container-fluid").mousedown(e => { 
	   $('.circle, .rectangle').addClass("glow-off")
	})

	// on up (mouse release)
	$(".container-fluid").mouseup(e => {
	   $('.circle, .rectangle').removeClass("glow-off")
	})
  
  $(".container-fluid").mousedown(e => { 
	   $('.vertical-rectangle').addClass("glow-off2")
	})

	// on up (mouse release)
	$(".container-fluid").mouseup(e => {
	   $('.vertical-rectangle').removeClass("glow-off2")
	})
});