Z-index of parent

1

Hello, guys!
Is there a way to change z-index of “.HYPE_element_container” then I hover on another div?

I want to realize such effect (hover object is above another): http://take.ms/EfNDy
but I have : http://take.ms/ugmCl

(I attach my file)

I found a source of an issue. It is a div with class “.HYPE_element_container” which has my div as a child. If I change z-index of my div, I also change z-index of div with class “.HYPE_element_container”. But I don’t find a way to make it.

PS What real cause to use such rendering model: “.HYPE_element_container” > mydiv instead only mydiv with all attributes ? Why I have one div on canvas in an app and two divs in HTML code with this structure: “.HYPE_element_container” > div

test.hype.zip (8.4 KB)

2

the stacking order can only be changed using hypes API -> documentation.
http://tumult.com/hype/documentation/3.0/#document-functions

a dirty trick could be to place a second row of the same elements above the shown that will show and scale instead …

3

Thanks.
I found such code from one of your answers:

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

Is there a way to give a name of the id of an object if I don't fill a Unique ID field?

UPD ok, I found: var yourID = element.getAttribute('id');

4

please have a look at the documentation, you can set the z-index via hypes API:

hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName)

5

But how I can give properties of a parent of my div?

PS Why Hype is using such difficult construction for div: each div in another div with class “.HYPE_element_container” ?

@Daniel Can you explain it?

6

I realize effect which I want to give. I use two scripts for mouseOver:

var yourId = element.getAttribute('id');
ind = parseInt(hypeDocument.getElementById(yourId).parentNode.style.zIndex);
hypeDocument.getElementById(yourId).parentNode.style.zIndex = 9999;

and mouseOut:

var yourId = element.getAttribute('id');
hypeDocument.getElementById(yourId).parentNode.style.zIndex = ind;

And all works right!

test.hype.zip (8.8 KB)

7

the advantage of the builtin hypefunction would be that it handles the complecated stuff … (nested divs)

1 Like
8

Yo don’t need to target the parent if you use the Hype API.

Called on mouseout & over,

var zindex =  (event.type == "mouseover" ? 1000 :  1);
var scale =  (event.type == "mouseover" ? 1.2 :  1.0);	

	hypeDocument.setElementProperty(element, 'z-index', zindex );
	hypeDocument.setElementProperty(element, 'scaleX', scale, 0.2, 'easeinout');
	hypeDocument.setElementProperty(element, 'scaleY', scale, 0.2, 'easeinout');

Or keep the scale stuff in the css and just use the z-index in the JS.
May be a little smother that way.

9

Thanks, @MarkHunte.
I will understand syntax and logic of code :slight_smile:
But if I try to use your code, I think, it works more slowly.
Mycode: http://take.ms/hZtla
YourCode: http://take.ms/Ctceb

10

@MarkHunte set a duration for the animation. -> reading the documentation could take you forward :slight_smile:

1 Like