Multiple toggling switches

Using JavaScript with Hype
3

This almost works, but you have to double click each element first, afterwards single clicks toggle the elements...

element.addEventListener('click', function() {   
this.style.opacity = (this.style.opacity == 1.0) ? 0.0 : 1.0;            
});

toggles.hype.zip (11.2 KB)

1 Like
4

Ooooh i was trying to do that ternary operator before, so thats how it works!
Yeah if you combine that with the elementfrompoint you could do a mass function you can put on any button

var x = event.clientX, y = event.clientY;
var currentlySelected = document.elementFromPoint(x, y);
currentlySelected.style.opacity = (currentlySelected.style.opacity == 1.0) ? 0.0 : 1.0;

except when i tried it it initially gave me a value of nothing so you had to click on it twice to make it invisible, so to make it work i added an opacity keyframe to all the buttons
onoff.zip (14.2 KB)

let me know if you know a cleaner solution

5

You are awesome Lucky, that works perfectly!

1 Like
6

Illuminating… It is these kinds of interactions that make this forum so valuable.

A big “Thank You” to All who contribute so generously with their time.

2 Likes
7

Hmm, this is odd, if I remove those keyframes, then I would expect to get the same thing but I don't. It all works as you posted it.

So I recreated it without the keyframes and tried it I got the have to double click behaviour.
I then added keyframes. Worked on single click.
Removed the keyframes. And still worked on single click.

Something odd is going on here.

The reason I was looking was I was going to try and fix that in the code rather than use keyframes..

Do any of you get this behaviour were Hype is not respecting the removal of the key frames..?

1 Like
8

This has become normal to me, most properties in hype get assigned to nothing by default as in not 0 or 1 or data, just nothing so i usually end up making a if(typeof something === undefined) to check if its gonna do that
I had originally set up a super complicated ternary operator for an answer but it looked silly.
But yeah if you also add a check if its undefined and set it to 0 then it would work without keyframes or double click

1 Like
9

@Luckyde, Cheers,

This seems like a bug to me. It is not seeing the value as it supposed to from the get go. Then adding the keyframe triggers the value to be noticed and set as it should have in the first place.

10

I that script above, I simply selected the elements I wanted to toggle and assigned the action all in one shot. I did not know about the elementfrompoint function, but that looks interesting.

11

Yer it's pretty cool. I used it in a scrolling date picker to work out which date numbers were clicked.
Heres the docs on it.

My other favourite command is querySelector() ( and probably off topic)
Which allows me to drill directly into an elements children and target a named class element without having to iterate over all the other elements in the document with the same class.

1 Like
12

I get the same behavior as Mark has posted

1 Like
13

Hi @Daniel,
Is this a bug

14

After reading Lucky & Mark’s posts about the value not getting assigned, I tried the following to assign the value via javascript. This seems to work well and the double click (or second click) behavior is gone - YAY!..

hypeDocument.setElementProperty(element, 'opacity', 1);

element.addEventListener('click', function() {   
    this.style.opacity = (this.style.opacity == 1) ? 0 : 1;            
});

toggles2.hype.zip (11.0 KB)

3 Likes
15

As the OP, I just want to say ‘thank you!’. I never expected such fast and accurate responses.

What a great community! Thanks to you all I’m back on track!

2 Likes
16

Hi Greg,
I used this snippet in one of my project to filter different things. That works exactly it should be.
In a second step I tried to reset the selection. On a reload button I put a “Jump to scene action” but the button state is still there and produce an unexpected behavior.

What’s the way to set all elements to the first state?

Cheers,

Olof

17

I'm not sure Olof. Can you upload an example of the issue?

18

Hi Greg,

this is the filter example. I tried to combine the toggler you wrote with the filter @MarkHunte did a while ago in this post: Filter Elements
The filter itself works but it would be cool to set the state of all switches to the first state on my reload button.

resetToggleSwitches.hype.zip (119.2 KB)

Thanks for ideas
Cheers
Olof

19

Hmm,

Sorry I have changed things a bit. I was not all that keen on the double layered buttons to show and hide.

The tags are already using CSS so we may as well do the same for the buttons.

I have grouped each button with it’s tick image and transferred the ID and class ‘tag’ to the group.

In the head I have added these css styles.

       .tagsButtonSelected {
		 /* Sets group/button blue when selected */
			background-color: #00ADFF !important; 
		}
		.tag:hover {
		 /* Sets the hover color of the group/button*/
			background-color: #00ADFF !important; 
		}
		
		.tickSelected {
		 /* shows the tick */
			opacity: 1 !important; 
		}

Each group Button is set to run the javascript :

filter() and toggle().

The filter() remains unchanged.

The toggle() now toggles the classes needed to set the button and ticks.

	$(element).toggleClass( "tagsButtonSelected" );
	
	var hakenWeiss = element.querySelector('.hakenWeiss'); 
	$(hakenWeiss).toggleClass( "tickSelected" );

The reset button now only runs a reset() function which finds the tags with a ‘show’ class and removes the classes we added. It no longer needs to reset the Scene.

	var activeTagList =  $("div.HYPE_element.tag.show");
	 
	$.each(activeTagList, function( index, tagValue ) {
	  //--REMOVE CLASSES OF THIS BUTTON
 
	$(activeTagList[index]).removeClass( "tagsButtonSelected" );
	var hakenWeiss = activeTagList[index].querySelector('.hakenWeiss'); 
	$(hakenWeiss).removeClass( "tickSelected" );

	    //--RUN THE FILTERS FOR THIS ELEMENT.
 hypeDocument.functions().filter( hypeDocument, activeTagList[index], event)
});

This is all of the top of my head without delving too deeply into what you are doing but works in in so far as the toggling goes.

resetToggleSwitches v2.hypetemplate.zip (129.3 KB)

2 Likes
20

Hi Mark,

quick response to your last replay. I’m away from my desk a couple of days and would say thank you for your helpful answer. I could change some things in my project and it looks good.

Maybe I will ask you some more if I’m back on desk.

Olof

21

How could I modify the javascript to have one object trigger the toggle of another object? Click on one button to hide or show other object?

22

The basic method would be:

  1. Add a way to reference the element you want toggled; the simplest is a Unique Element ID in the Identity Inspector. I’m calling mine “myotherobject”
  2. Add a Mouse Down (or other event) handler on the the triggering element that is set to Run JavaScript, and add a function with code that looks like:
var otherElement = hypeDocument.getElementById("myotherobject");
var currentOpacity = hypeDocument.getElementProperty(otherElement, "opacity");
if(currentOpacity >= 1.0) {
    hypeDocument.setElementProperty(otherElement, "opacity", 0.0);
} else {
    hypeDocument.setElementProperty(otherElement, "opacity", 1.0);
}