I’ve researched how to do this but I can’t quite figure it out. I think it is fairly simple.
I’d like to have a button change opacity on click. I’d like to use javascript to target a certain class as I have a lot of these buttons.
Thank you
Matt
Try this in a function using a Conditional Ternary Operator
var buttons = document.getElementsByClassName('aButton');
for (var i =0;i < buttons.length; i++){
//console.log(buttons[i].style.opacity );
//-- The button does not have any opacity attribute unless you have set it in the inspector.
//So I found surronding the numbers in quotes works better for all possibilities
buttons[i].style.opacity = ( buttons[i].style.opacity == "0" ? "1" : "0");
}
3 Likes
Thanks so much for this @MarkHunte !
The javascript is over my head so forgive me for not understanding. And, sorry if my question wasn’t clear.
It seems when I run your script all of the buttons in the scene with that class go to opacity of 0%.
What I really need is for when one button amongst several is clicked it changes opacity or even changes color so that it indicates it has been clicked.
Am I approaching this incorrectly? I’d really like to do this with javascript and not a timeline.
Thank you!
I’m not sure I understand completely, but if you want to change the color of a clicked button via javascript, you could use an “On Mouse Click” for each button to run this script…
element.style.background = "red";
btn-clkd.hype.zip (11.7 KB)
TIP: If you have several buttons, you can “Option+Click” each button to select them. Once selected, you can apply the “On Mouse Click --> Run Javascript…” action.
It is possible to animate the color change, like into a Fade?
I have been trying with Jquery but with no luck, this is the code I am using:
$("#div2").animate({color: “#EE1759”,opacity: 1.0}, 1000 );
There are a few ways to do this,
But lets try it just using normal Javascript and Hype API.
First as above I give the buttons all the same class. Then I run them through a function to change the colour of the clicked button to blue and the none clicked ones to the default colour.
We can add opacity instructions in the same function to make the colour look like it is fading in.
To help this we also place a text element over each button as their labels. The text elements have no background colour and also are set to ignore mouse clicks.
Doing that helps make sure the text does not fade and just the button colour does.
var buttons = document.getElementsByClassName('aButton'); //-- GET ALL BUTTONS
for (var i =0;i < buttons.length; i++){
if (element.id != buttons[i].id){//-- ONLY SET OTHER BUTTONS TO GREY (#F0F0F0)
buttons[i].style.background = "#F0F0F0" ;
} else {
hypeDocument.setElementProperty(element, 'opacity', 0.4, 0.0, 'easeinout');//-- FADE OUT CLICKED BUTTON
element.style.background = "blue"; //-- SET IT TO BLUE COLOUR
hypeDocument.setElementProperty(element, 'opacity', 1, 0.9, 'easeinout')//-- FADE IT BACK IN
}
}
btn-clkd MHv1.hype.zip (13.5 KB)
4 Likes
I think I may confused you, I was looking for a way to crossfade colors, lets say green to red. But your code works great for direct fade in and outs.
This uses some css animation and javascript.
We set up two css keyframe animations. One for the clicked button and one for the buttons that are now unchecked.
The unchecked is window dressing to make the unchecked buttons animate back in a transition instead of immediately.
We give the buttons a base class so we can find them all in the JS function.
The JS function will first remove the Button_unClicked class of the clicked element if it is found in it’s classList.
It will then iterate over the buttons.
An IF Clause will filter the clicked button and add the Button_clicked class. When this class is added this will trigger the CSS transition on it.
If not the button clicked we check if this button already has the Button_clicked clicked class.
If it does we set the background colour of it to red. This is just to match it’s current colour so we do not see a sudden change when we now remove the Button_clicked class from it’s classList.
We next add the Button_unClicked* class to this buttons class list which then triggers the Button_unClicked* CSS.
You can give the Button_unClicked* CSS a slightly longer or shorter time to play out depending on what you want the de clicked transition to look like. For example the Button_clicked (color_change animations ) can be 2s (two seconds) and the Button_unClicked (color_unchange animations ) can be 1s (one second )
CSS
<style>
.Button_clicked {
-webkit-animation: color_change 3s forwards;
-moz-animation: color_change 3s forwards;
-ms-animation: color_change 3s forwards;
-o-animation: color_change 3s forwards;
animation: color_change 3s forwards;
}
@-webkit-keyframes color_change {
from { background-color: #0433FF; }
to { background-color: red; }
}
@-moz-keyframes color_change {
from { background-color: #0433FF; }
to { background-color: red; }
}
@-ms-keyframes color_change {
from { background-color: #0433FF; }
to { background-color: red; }
}
@-o-keyframes color_change {
from { background-color: #0433FF; }
to { background-color: red; }
}
@keyframes color_change {
from { background-color: #0433FF; }
to { background-color: red; }
}
.Button_unClicked {
-webkit-animation: color_unchange 4s forwards;
-moz-animation: color_unchange 4s forwards;
-ms-animation: color_unchange 4s forwards;
-o-animation: color_unchange 4s forwards;
animation: color_unchange 4s forwards;
}
@-webkit-keyframes color_unchange {
from { background-color: red; }
to { background-color: #0433FF;}
}
@-moz-keyframes color_unchange {
from { background-color: red; }
to { background-color: #0433FF;}
}
@-ms-keyframes color_unchange {
from { background-color: red; }
to { background-color: #0433FF;}
}
@-o-keyframes color_unchange {
from { background-color: red; }
to { background-color: #0433FF;}
}
@keyframes color_unchange {
from { background-color: red; }
to { background-color: #0433FF;}
}
</style>
JS
var buttons = document.getElementsByClassName('aButton'); //-- GET ALL BUTTONS
element.classList.remove('Button_unClicked');//--
for (var i =0;i < buttons.length; i++){
if (element.id == buttons[i].id){ //--
buttons[i].classList.add('Button_clicked');
} else {
if (buttons[i].classList.contains('Button_clicked') ){
buttons[i].style.background = "red" ;
buttons[i].classList.remove('Button_clicked');
buttons[i].classList.add('Button_unClicked');
}
}
}
cssButtonFade.hype.zip (19.7 KB)
Note : the line of code : `buttons[i].style.background = “red” ;
In the JS to set the background colour just before we go from the clicked colour (red) back to the un-clicked colour (blue) was initially there because I got a some colour flicker when I was trying to workout a good way for the fade back on the de clicked button. After posting the above I released that the code seems to have evolved that it is now probably not needed but will leave it there in the above example for now.
3 Likes