Adjust z-index at the end and beginning of a time line

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)?

Currently in Hype 3.03, you need to use “.parentNode.style.zIndex” to alter the z-index with javascript…

hypeDocument.getElementById('yourId').parentNode.style.zIndex = 9999;
2 Likes

Greg has the solution but just to clarify things a little.

Each rectangle element in hype is wrapped in it’s own container (HYPE_container) this is what you need to adjust hence the “parentNode”

D

1 Like

Thank you gentlemen for your suggestions. I have briefly attempted to incorporate them without success. Given more time I will try again.

Here's a sample of using a timeline to change the z-index of an element...

z-timelined.hype.zip (11.4 KB)

Note: I set up a Timeline Action at the end of the timeline with the javascript I posted earlier...

In your example javascript above, how do I obtain the “yourID”?

You can set/assign the id of an element in the "Identity Inspector" in the "Unique Element Id" field.

1 Like

Greg, thank you for your input and patience. I had the wrong id. You have saved me a great deal of grief. It works now!

2 Likes

In Hype 3.5 you can set the z-index like this...

hypeDocument.setElementProperty(element, 'z-index', 2);

The 'getElementProperty & setElementProperty' are now available in the Documents section of the javascript window.

8 Likes

Thank you for the information. I will try this technique also.

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:

	currentZ = hypeDocument.getElementProperty(el1, 'z-index')   	
	newZ = currentZ + 1
    hypeDocument.setElementProperty(el1, 'z-index', newZ);
1 Like

I’m trying to copy what you’re doing but I seem to be having a few issues. Could you please have a look to see what I’m doing wrong?

I’m using groups of items within symbols.

HoverNav.hype.zip (39.5 KB)

What are you trying to do?

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:

newZ = currentZ - 1

Instead of

newZ = currentZ + 1

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.

I don’t understand why it’s not working for me. Does it work on symbols? and can all the symbols have the same ID?

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...

currentZ = hypeDocument.getElementProperty(element, 'z-index');	
newZ = currentZ + 1
hypeDocument.setElementProperty(element, 'z-index', newZ);
3 Likes

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...*/);
3 Likes

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.

LAYER Z SHUFFLE TEST.zip (15.7 KB)

element will be the clicked element in the hypefunction and within the API exists a setElementProperty-method that includes z-index …

1 Like

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