Hello, I'm new in using Hype and am trying it on a new project. I'm not a programmer but have knowledge of simple coding. I need to create this popup window with multi-level folder navigation (up to 5 sub levels). The items selected will be highlighted as you navigate and the page will auto scroll horizontally and vertically accordingly dependent on the number of items on the screen. Would anyone have the HTML code on how to build this or have built something similar in the past? Alfredo
You probably need to give more details on where this list is coming from and what it is in reality.
Is it dynamic?
Is from a real directories on a file system?
Is it just purely an imaginary file system?
Do you have anything you have put together?
@MarkHunte The content is security sensitive so I can't share the actual information or resource but this is a screenshot example of one of the common popups. I changed the information so it's generic. The original resource was created in Flash years ago so it needs a redesign. It's not dynamic. The idea is to change the resource to HTML5. It is an old resource so the original idea was derived from the "folder directory structure". There's a lot of information to be displayed. I was thinking of designing the popup as a "mega menu" where there's a number of sub levels (up to 5 levels) for the user to access the information. But if there's a way whereby the user can find the information in one click as oppose to a number of pages (multiple clicks) would be great. There are instances where the pages are scrollable because of the amount of information that needs to be displayed in a limited page of real estate. Here is a screenshot of a mega menu. A possible solution? If so, can it be built in Hype?
Not sure I will take this further as it is complex.
I thought I would try and make a navigation with little js.
This was just me messing about with an approach that probably would be best suited to fully coding to link every thing up and assign images and text rather than this approach which I use data attributes, class names and the hype elements themselves as a kind of file system.
This sort of approach once you get your head around it is simple but can get into a mess real quick where you lose track but I just stuck with the first idea.
The idea is to assign a (data-child ) value with an id name in the attributes where the clicked element will show the Group with that same id name in its (data-me ) value.
We use class names with css and in the code to add and remove the class names.
The class names take care of background colour and hidden of child/parent views.
Any way here it is ( remember this was a thought experiments not pretty )
... And just see that you posted a reply
filesystem.hype.zip (487.3 KB)
( just noticed I need to have the highlight on the parent also...)
Ah I see like a Tree.
That probably is easier to do in code and using a json that reflects the tree organisation.
But I would go for something like this
@MarkHunte Thanks in advance for your help. I will try to open your "filesystem.hype" first and see if I can make sense of what you're proposing. Btw this is my first time using Hype (I'm using Hype 3.5). How do I go about opening "filesystem.hype"?
I will also look at W3Schools online HTML Editor as well. I will keep you posted.
You will need to upgrade.. I. on v4
This may be a better way of doing it.
jqTree
You will also need to load jQuery.
In the head file
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.6.3/tree.jquery.js"> </script>
A JS function called on scene load
var data = [
{
name: 'Beverages', id: 1,
children: [
{ name: 'Water', id: 2 },
{ name: 'Coffee', id: 3 },
{
name: 'Tea', id: 1,
children: [
{ name: 'Black Tea', id: 2 },
{ name: 'White', id: 3 ,children: [{ name: 'Green Tea', id: 4 ,children: [ { name: 'Sancha', id: 1 },
{ name: 'Gyokuro', id: 3 }, { name: 'Matcha', id: 4 }, { name: 'Pi Lo Chun', id: 5 } ] } ] }
]
}
]
}
];
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
And on the scene a Rectangle with the id of #tree1
--
I would also suggest you look through the jsTree documentation to see how styling works.
I have not read it ( just glanced at the example pattern), so my use in id'd in the nodes may be wrong.
If you do upgrade then here is the file but the above should get you to the same stage.
tree.hype.zip (15.6 KB)
