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;
1 Like
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)
@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)
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)
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!
… and using a script your target is always the parentNode. should work then too …test.hype.zip (11.9 KB)
1 Like
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?
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;
}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;
}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;
}
3 Likes
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.
Is there away to increase the z-order by ‘1’ with a click? I’d like to have a number of draggable elements that can be reordered multiple times with a click. IE a basic collage maker.
Try this: 4 colored boxes…
var rb = hypeDocument.getElementById('redBox');
var bb = hypeDocument.getElementById('blueBox');
var gb = hypeDocument.getElementById('greenBox');
var yb = hypeDocument.getElementById('yellowBox');
var rbz = hypeDocument.getElementProperty(rb, 'z-index');
var bbz = hypeDocument.getElementProperty(bb, 'z-index');
var gbz = hypeDocument.getElementProperty(bb, 'z-index');
var ybz = hypeDocument.getElementProperty(bb, 'z-index');
function highestNumber(num1, num2, num3, num4) {
return Math.max(num1, num2, num3, num4);
}
var theHighest = (highestNumber(rbz, bbz, gbz, ybz));
hypeDocument.setElementProperty(element, 'z-index', theHighest + 1, 3.0, 'easeinout');
myZindexPlayground.hype.zip (12.4 KB)
1 Like
Here is a handy bit of code that takes a group of elements IDs and when they are clicked change their z-index to be the topmost element. I have condensed the code from my original version and made it more efficient. You enter your elements IDs in the zAllElemts variable. I have also added a draggable version.
// All elements array
var zAllElements = ['redBox', 'blueBox', 'greenBox', 'yellowBox'];
// Number od elements in the array
var noOfElements = zAllElements.length;
//New array to contain elemts ID info
var zIndexArray = new Array;
//Temp container for ID array build
var elidc;
//loop to store all the elements info
for (var i = 0; i < noOfElements; i++) {
elidc = hypeDocument.getElementProperty(hypeDocument.getElementById(zAllElements[i]), 'z-index');
zIndexArray.push(elidc);
}
var highestZ;
//find the highest element
highestZ = Math.max(...zIndexArray);
//set the element to be the topmost
hypeDocument.setElementProperty(element, 'z-index', highestZ + 1, 1.0, 'easeinout');
Z Index Playground V2.hype.zip (13.7 KB) Z Index Playground V2 Dragging.hype.zip (14.0 KB)
1 Like
Based on your example I created another version: Z-Index_Playground_JHSv1.hype.zip (15.9 KB)
The following line is in the “Head HTML”:
var highestZ = 1000;
I figured there will not be over 999 objects in a Hype doc - if so make higher.
Then in the triggering function:
highestZ = highestZ + 1;
hypeDocument.setElementProperty(element, 'z-index', highestZ);
I get the same results as with your code.
Is there a particular use case (or ancillary functionality) for your version with the extra code?
3 Likes
Based on the fact that changing z-index will only apply on elements with the same parent it’d be even more generic to get all elements inherit by the parentelement of the chosen one and collect and work on that z-indexes … that way there would be no need to store the identifiers.
But be careful, you’ll experience that actually Hype stores every element within a customparent.
Happy scripting :)!
Stay healthy, stay at home!
1 Like