I have created a page with symbols. When you swipe on a symbol (with the name of the country), a modal window of important information opens. How to make it always on top of the rest of the symbols? I tried different options in nx and the property of hiding and moving actions along the timeline. When you open this window, there are always other symbols on top of it. What can be used so that other symbols are not visible when a modal window opens with this information of any of the symbols?Country.zip (906.5 KB)
The non-coding approach would be to not have the popup as part of the symbol object itself, and instead have the popups as separate items that are ordered higher than the controls. Symbols can communicate to one another via Custom Behaviors.
If you did not want to change the general structure of the popups, then you'll need a bit of code. The basic way to do this would be that when you want to show a popup, you'd make the parent symbol have a very high z-index, and then restore the z-index to its original value when the popup is closed.
Hype provides a way to properly get and set the z-index of elements via these APIs:
var originalZIndex = hypeDocument.getElementProperty(symbolElement, 'z-index');
hypeDocument.setElementProperty(symbolElement, 'z-index', 1000);
(you'll need a way to get the symbolElement)
How to implement it in this case? Through Scene Load and Run Javascript
Given how your document currently appears to work, I would probably add this as a timeline action on your symbols' main timelines. This has the added benefit of the element argument being the symbol element itself, so it is pretty easy to reference and you won't need to hunt down the proper element.
I called this function sendToTop(), and the code would look like:
// put everything back to the low position
hypeDocument.functions().sendAllBack(hypeDocument);
// add a class name so it is easier to find later
element.classList.add("ontop");
// save the original z-index
var originalZIndex = hypeDocument.getElementProperty(element, 'z-index');
element.setAttribute("data-original-z-index", originalZIndex);
// set the current z-index to be something very high
hypeDocument.setElementProperty(element, 'z-index', 1000);
I didn't really see where in your current document you wanted to dismiss items on the top, since clicking the button doesn't seem to do it. So I'm referencing a sendAllBack() function I made via the Resource Library's + button in this, but I imagine you'd also want to call it in other places. This function looks like:
// get all elements that were put on top
var onTopElements = document.getElementsByClassName("ontop");
// iterate through each of them
for(var i = 0; i < onTopElements.length; i++) {
// restore their original z-index
var originalZIndex = onTopElements[i].getAttribute("data-original-z-index");
hypeDocument.setElementProperty(onTopElements[i], 'z-index', originalZIndex);
// remove the indicator that they were on top
onTopElements[i].classList.add("ontop");
}
2 Likes
Many thanks! That's cool
1 Like
Function works fine. Thank you very much! But with it another problem appeared missing scrolling on mobile devices in the viewing window after the function brought the required element over all itemsexp.zip (152.6 KB)
It looks like you have On Drag handlers at the symbol level (once entered the symbol, in the symbol inspector). These are probably interfering with drags for scrolls. I would recommend removing these, and add On Drag events just to the specific elements that you want to respond to the drag.
1 Like
Thanks for the advice! I solved this problem in a different way. I placed the sliders of the panel at the bottom and now it is not required to scroll But there is a scroll if you make a swipe on the very side of the screen when viewing a swipe. An example for mobile gadgets can be viewed here: https://intaplink.ru/exp
I make websites only for mobile gadgets. For Instagram accounts. That the mobile site should look like mobile apps with a little scrolling and that everything works by swiping and clicking on elements.
1 Like
Great! Glad you have a solution - I like the "analog" feel to the site.
1 Like
Thank you! This is all thanks to your best program - Hype. But I would also like to implement a commercial module for creating, for example, an online store based on Hype
1 Like