Change stacking order on click

Using JavaScript with Hype
1

I did found @JimScott’s neat solution showing a ”hovered” object on top when having multiple stacked items (Stacking order change when on hover or on click), but it does not seem to work for clicked items (which he also explicitly put into words). After poking around with those scripts to solve it – along with others – I wasn’t able to to do much more than getting a headache.
Please find the attached hype document where the desirable scenario would be that if one click on the respective ”+” icon = that specific lot shall show on top every time clicking the respective ”+”, even if the other one is unfolded e.t.c. (meaning z-order). It would be greatly appreciated if anyone has a clue to sort this as I’m running out of painkillers. :wink:
z-order_by_clicking.zip (51.6 KB)

2

z-ordering can be tricky but some “naive” solutions can work pretty well. I’d probably just keep track of the “last” z index and always increment that by one whenever something needs to go to the top. @JimScott’s solution only takes care of single elements, but you can store the original z-index in the element’s data attributes to restore. So you could add something like this to the head HTML for helper functions to bring an element to the top of its siblings and then restore it:

<script>
function orderToTop(hypeDocument, element) {
	if(window.lastUsedZIndex == null) {
		window.lastUsedZIndex = 10000; // a high number that should be above everything
	} else {
		window.lastUsedZIndex += 1;
	}
	var originalZIndex = hypeDocument.getElementProperty(element, 'z-index');
	element.setAttribute("data-original-z-index", originalZIndex);
	hypeDocument.setElementProperty(element, 'z-index', window.lastUsedZIndex);
}

function orderRestore(hypeDocument, element) {
	var originalZIndex = element.getAttribute("data-original-z-index");
	if(originalZIndex != null && originalZIndex.length > 0) {
		hypeDocument.setElementProperty(element, 'z-index', originalZIndex);
	}
}
</script>

Then on click, you would need to use orderToTop and target a specific element, giving it a Unique Element ID in the identity inspector first. That code would be used in a Run JavaScript and look something like:

var elementToRise = hypeDocument.getElementById("theID");
orderToTop(hypeDocument, elementToRise);

I made a sample project that tests this out and also has buttons to restore elements:

zindex.hype.zip (22.5 KB)

(note that the pushBoxToTop() function just uses the box element that is directly clicked, so it doesn’t do the getElementById() call as it is already the element to move up)

2 Likes
3

That worked very well, Jonathan !! Thus a huge thanks for yet another impressively swift and comprehensive response!

1 Like