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.
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;
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)
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?
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;
}
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.
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');