Looking for help with adding Javascript to persistent symbols

Hello!

I'm new to Tumult Hype, but I'm really excited with what I have been learning so far! I'm working on a project, and I'm stuck in a few areas. All of my previous website work has been with visual programs like Adobe Muse and Wordpress/Elementor page builders. I'm a beginner with coding, so I've got the basic concepts down, but definitely still have a LOT to learn.

I'm trying to create a digital magazine similar to what you would see on Apple's New+ app.

Reading through the forum I have been able to figure out how to scroll down on a long page and swipe side to side to scroll through the pages. I'm having trouble with the coding to have two bars on the screen- one that sticks to the top and one on the bottom.

I'd love if I can get:
-The top bar to go away when the user scrolls down, and reappears when the user scrolls up.
-A bottom bar that sits at the bottom of the viewport, disappears when the user scrolls down, and reappears when the user scrolls up.
-buttons inside of the bars.

I've been reading through a lot of posts on here and the documentation, and have been trying a few things out. Can I achieve something similar to: Digital Magazine on News + by:

  • Using Persistent Symbols for top and bottom bars (Do I add an Element ID to the symbol?)
  • Adding Jquery to resources
  • Adding Javascript Function (if so, do I run on symbol load? on scene load? on prepare for display?)
  • Does this need CSS to be a "sticky" or "fixed" element on the page with what I'm trying to achieve? If so, do I add it to the Head HTML?

I've been working on this for a few weeks and would be so appreciative if someone could guide me if I'm headed in the right direction, or if I'm totally off and need to do some more research. Thank you!

:slight_smile:

Mobile_test-scroll.zip (41.6 KB)

:rotating_light: Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.

Looks like a sleepy evening around here, so eh, I'll try to post some useful info. You listed three main issues. Let's start with the easiest one first...

I'm not sure, but it seems like a "Persistent Symbol" is what you're looking for. It's kinda like a "HUD" — Heads Up Display... or basically a User Interface. In other words, the menu should stay regardless of which scene you're on. Does that sound like the right requirements? If so, then the "Menu" template can help...

https://photics.com/free-template-tuesday-22-tumult-hype-menu/

...or since you want to use arrows, perhaps the "Navigating" template is more helpful...

https://photics.com/free-template-tuesday-31-tumult-hype-navigating/

That should get you the left-and-right controls you're looking for. (I number the scenes... 1... 2... 3... 4... etc... so the right arrow moves the count up one... the left arrow moves the count down one.

This one's tricky. At first I thought, no problem, my webpage template should handle this. However, you want the menu to hide.

Hmmm :thinking:

The first step is to add an event listener...

 document.addEventListener("scroll", scrolling);

But each time the scrolling is triggered, you'll want to calculate the difference between the previous location. You can get that with the "scrollTop" property value...

So, if a scroll event was detected, and the previous scrollTop value was 20, but then it went to 10, then play a Hype Timeline that hides the top menu.

The "webpage" template might still be helpful because it shows how to work with scroll events. An important thing to watch out for, don't duplicate your event listeners. If you load an event listener on scene load, reloading that scene could add a second... third... fourth... etc... copy of the event listener. That's when weird things could start happening with your project — very confusing when you don't know what's going on.

This is the same as the previous problem, but in reverse. I'm not sure that's a good design. Wouldn't that look a little strange, always having half of the interface hide like that?

For starting out with Hype, you picked a challenging project. As an example, your design picture shows iPhone notches. Whew, that's tedious to work with. Fortunately, Hype did add some support for Cover Notches.

But, in general, your project seems possible with Hype. Oh, there is one more template...

https://photics.com/free-template-tuesday-14-tumult-hype-book/

...the navigation sounds very similar to your magazine idea.

2 Likes

Thank you for your response! I'm working through your suggestions now. I also just purchased the book on your site. I look forward to reading it! :slight_smile:

3 Likes