Show hide element with action?


#1

How can I add an action to a button or keyframe to hide an element on the stage?
In edge it was super easy, you start and action (Click, MouseUp, e.t.c), select built-in Hide action then select a target.

Loving Hype but starting to notice lots of limitations when it comes to actions and targeting. Am sure there is a way to do with some kind of javascript but stuff this simple should really be included. In Hypes case, you select and element on stage, go to Action panel, add an action and in the drop down select a Show/Hide action and then somehow select a target you want to show or hide. Hate to admit it, but Edge has a better Actions panel :frowning:


Showing a hidden element with a button
#2

Would just like to add a lot of users will be jumping ship from Edge to Hype. As buggy as Edge was it did have some killer features that I am hoping someday make there way over to Hype. Fingers crossed.


(Mark Hunte) #3

Hype 3.5 has a built in Property:

In the Property list it is called Display.
In the Element Inspector look under Visibility : Display : Visible. - Hidden

You can then use the normal Timeline methods to animate this into an Action.

HideExample 2.hype.zip (14.0 KB)


#4

Thanks Mark. Thats one way to do it sure, but it involves using the timeline. Ideally, you could click on a button and have it toggle the display on/off without using the timeline. Thanks for your solution though.


(Jonathan Deutsch) #5

If you have an mouse action on the element, you can set it to run JavaScript. There’s nothing special about the code as it can be vanilla JS. It would be:

element.style.display = "none";

Alternatively, if you need to target a different element, you would give it an ID in the Identity Inspector, and then use this code:

hypeDocument.getElementById("yourElementID").style.display = "none";

Whenever possible, Hype tries to make it so you can use standard code with the DOM.

I won’t knock Edge’s targeting, but I will say that in general we took the approach of interactions without code for as much as possible (hence @MarkHunte’s solution which requires no code). Edge required code for every interaction so they needed to improve the way users wrote that code, a feature that came much later in their life.

We’re always wanting to work in good features!


#6

Thanks Jonathan. Yip that was pretty easy! I guess I just need to learn Hypes way of doing things.


(Casey) #7

Jeez… for the longest time I’ve been having content offscreen and then animating them to position on screen to avoid them being clickable. This will save mondo amounts of time for me.


(JVD) #8

To make something invisible we write “none”.

What is the word to write to make it visible?


(Loves Hype) #9

block

See https://www.w3schools.com/CSSref/pr_class_display.asp