I have a series of rectangles of the same size (small), which when individually clicked upon, grow in size, overlapping (and hiding) the other content and remaining fixed until clicked upon again. When clicked again, the newly large rectangle shrinks back down again to its original size and position. That I have done. My problem is that I want the growing and shrinking rectangle to do its movement above (highest z-index) the other content (the other rectangles) and to return to a low z-index upon its return so another, or the same small rectangle, can be clicked again and the process repeated.
I have tried setting the z-index with javascript with multiple functions at various points/times but I am not proficient enough in javascript to accomplish what I want. Does someone here have one or more suggestions (other than learning javascript)?
I helped someone out with this recently and thought I’d share how to easily increment the Z-index (bring an element forward). First, set an element to have an ID of el1
Next, create an action to run this JavaScript:
They way you currently have it setup, when hovering the symbol AND when hovering the group within the symbol, the Z index script runs. This is increasing the Z index of the element, which doesn’t really do much because that element is already the topmost element. If you wanted that element to move behind something else in the layer order, you would need to decrease the Z index value by using this format:
All of those rectangles are going to be the same, and enlarge when you hover over it. They therefore need to have the highest z-index value when it is hovered.
My goal was to have a global variable of z-index, and each time you go hover one, the variable is incremented and therefore the hovered element always has the highest z-index.
But to reiterate, I need each rectangle/symbol to enlarge and be above everything else.
No, they cannot, Hype is warming that you have already used that "ID". You can use the word "element" to replace "el1" in your script ( you'll then need to remove the "Unique Element ID's" ) like this...
The basic technique for working with elements within symbols is to give them a class name (which you would know is unique within the symbol), and [generally] give the parent symbol element a unique ID. Then you can lookup the symbol element by unique ID, and use getElementsByClassName() on this symbol element to find the sub-element you want to modify. Example:
var symbolElement = hypeDocument.getElementById("theSymbolElementID");
var subElement = symbolElement.getElementsByClassName("theElementClassName")[0];
hypeDocument.setElementProperty(subElement, /*...property, value...*/);
What if I wanted the element to reset it z- value at the end(start) of a reversed timeline?
I’m trying to avoid having to ,make a reset script for every item that clicks this way.
Look at my example. I want the click item to start the timeline, jump forward in z, then when clicked again, reverse the timeline and rest it z value.
I think my underlying question is how to keep the element from reverting to a lower z value before the reverse time line animation is completed. Then reset the z value