Text Overflow Reset between Scenes

I am creating a informational kiosk app for an iPad. The “Title Page” has a photograph of a group of people. The user will [on mouse click(tap)} on a person, which triggers a jump to a separate scene with biographical information on the person. A button on the top takes the user back to the “Title Page”.

On the biographical scene, there is a text box, which has scrollable overflow text.

Problem:
***The problem is that I can’t figure out is how to reset the biographical information text to the beginning of the text when jumping between scenes (e.g. see sample project— reset to the “TOP OF PAGE” text). If a user leaves the scene, then comes back, I want the text to appear as if the scene was fresh (and not scrolled half way down). ***

i have put an idle timer script to return to “Title Page” after 8 seconds. The text will still not reset to “TOP OF PAGE”. This may be a solution— maybe reload the entire page at the end of 8 seconds? I am a newbie in javascript, so any help with that script would be helpful (located in Head HTML).

Thank you in advance!

TextOverflowResetBeatles.zip (657.4 KB)

On scene unload … you can run a small piece of javascript to (re)set the scrollTop position of a scrollable element.

1B422C4E-7307-4E5B-9809-F1A0B8716A9C

The below function (I’ve named resetScroll but that’s optional) and in Hype you can add it to any scene “on scene unload” and it will reset the elements with scrollBars and a class of “.text”

That being said and for some extraordinary reason as to why you are putting the code to control the timer and everything else in the Head HTML :smiley: This will enable to do the same but add the following to your head html

D27FA8CF-0FC5-4C6C-9123-01B4F8CC0C8D

1 Like

DBear, I was unable to recreate both scenarios that you suggested above. Were you able to get it to work on your file? If so, would you be able to upload the working version so that I can pick it apart to see what I am doing wrong.

Do I need to specifically name the class of the the Biography text boxes under the IDENTITY tab? or is .text standard for hype?

Thanks!

(also, I’ve also figured out how to transfer the timer function to a js function triggered by On Scene Load. Thanks for that heads up!)

".text" is not specific to Hype it's just an example of how you choose a class selector. Of course in your document it wouldn't work unless you gave all of your scrollable text boxes that class. Classes are denoted by a "." followed by whichever string you want. In your case it's ".BioText"

You can see in the last example the highlighted parts in red are what you need to add to your document in the Head HTML. (Also you can see I'm targeting your ".BioText" selector). If you open your document and look at what you have in the Head HTML and then scroll to the bottom and look at the pic above you'll see where it needs to be added.

I don't have a document you can see as it would take too long to recreate what you're doing. It should only take you a little time to copy what I've shown into your doc :wink:

For my first example to work you can just copy the function into an On Scene Unload action. Then just change the .text to .BioText

1 Like