Change the Z index of an element on click


(Patrick) #1

Hello everyone,

I am quite new to Hype and have already browsed the web to find a solution to this issue but nothing seems to work.

Is there a way to change the z-index of a box during recording? I would like to create something like a carousel where cards hide behind each other during the recording.

Thanks al lot!


(Hans-Gerd Claßen) #2

no.

if you want to set a new z-index by script your target will be the elements parentNode, because hype wrappes its elements …
hypeDocument.getElementById(‘yourId’).parentNode.style.zIndex = 9999;


(strmiska) #3

you don´t need to record the z-index. you can use a script.
here´s an example: if you drag an element, it always appears on top, at the and of a drag, it is set back to its original position.
change_zIndex.hype.zip (13.1 KB)


(Patrick) #4

@strmiska Thanks a lot!

I tried it in my own project, it does not work though.

What am I doing wrong?

test.zip (15.4 KB)


(strmiska) #5

for your example you don´t need a script. you can find a solution by using timelines only.
see example.
test.hype.zip (13.5 KB)


(james koh) #6

added drag to control timeline to strmiska’s example.
it works pretty OK.
test-2.hype.zip (14.8 KB)


(Patrick) #7

Wow awesome! Thank you so much! @strmiska: How did you do this exactly? I see you were using opacity.

EDIT: I got it. Thanks a lot!


(Hans-Gerd Claßen) #8

… and using a script your target is always the parentNode. should work then too …test.hype.zip (11.9 KB)


(Bas) #9

Hi @strmiska, this is a great way to to this so very usefull!
Im trying to adjust your z-index code to the object coming to the front on click and back again on an other click, like moving a video to the foreground and than back again when your done watching… But I’m failing to find out the right code, would you mind pointing me in the right direction?


(strmiska) #10

you can see the used code in functions. on drag:

 var back = element.style.zIndex;

 if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
  element.parentNode.style.zIndex=200;
} else if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
 element.parentNode.style.zIndex=back;
//element.parentNode.style.zIndex=2;
}

(Bas) #11

Im trying to make it so on-click it is putting it in the foreground and setting it back without using the drag function, but can’t seem to get it right. I thought it would be something like below, but im doing something terribly stupid it seems. Anybody know what would be the correct way of writing this down…
Thank so much!

var back = element.style.zIndex;

if (element.style.zIndex < 1000) {
element.parentNode.style.zIndex=1000;
} else if (element.style.zIndex == 1000) {
element.parentNode.style.zIndex=back;
//element.parentNode.style.zIndex=2;
}

(strmiska) #12

onClick

element.parentNode.style.zIndex=2000;

change_zIndexStay.hype.zip (13.2 KB)


(Bas) #13

Thanks @strmiska,
Just what I needed to get it working… Now on click the object get to the front and on click again it moves back to its original z-index position.

var back = element.style.zIndex;

if (element.parentNode.style.zIndex <= 2000) {
element.parentNode.style.zIndex = element.parentNode.style.zIndex + 2000;
}

else {
element.parentNode.style.zIndex = back;
}

#14

Let’s say we have a stack of 7 elements, all the same size. I would like to Action each one to, On Mouse Click, move to the bottom of the stack. I can not make this a timeline thing, nor can I drag, they don’t work for this project. I have absolutely no experience in JavaScript, so if you make a suggestion using it, please show me an example. I am new to all of this so imagine you’re explaining to a 5 year old.


#15

@ZMoss

see your other post :wink: