Browser behaviour with JS on scene load

Using JavaScript with Hype
1

I wanted to run a prompt to enter a name into a JS prompt on loading a scene and noticed different behaviour between browsers. Both Safari and Chrome show the prompt before anything on the page is visible, while Firefox shows the scene with the prompt in focus (see attached)
BrowserOnSceneLoad.zip (18.2 KB)
.

I've got around the problem by running a timeline on scene load with a timeline action to run the JS prompt.

Is there another (better?) way I can achieve this with the scene showing before the prompt in each case, or is the best method?

2

The prompt is basically an Alert. So it does not surprise me you get the behaviour.

If the delay in the script being called works for you then yes that probably is ok.

I personally don't like alerts and prompts and feel that this is not the intended use for a prompt.

An alternative is to have the first scene act as your input area by using normal forms or as in this example contenteditable on a rectangle. Here I have added the attribute using Hypes built in Additional HTML attributes in the Identity inspector.

BrowserOnSceneLoad_vmh1.hype.zip (50.4 KB)

1 Like
3

Perfect thank you. I've searched the forum for ages looking for a simple way to allow someone to enter their name without JS and obviously missed this simple setting. I like this much better, with or without the JS. Thanks heaps (again).

2 Likes
4

I've been trying to implement this on a single scene (as I've completed everything else in a single scene and haven't used more than 1 before) but I can't stop the dialog blocking interactivity in the objects behind it, even if moved off the screen by timeline.
Do you think it is possible to use this without jumping to another scene?
Thanks.

BrowserOnSceneLoad_vmh1_vms2.zip (26.4 KB)

5

A couple of things.

When an element is 0 opacity it still retains its mouse/pointer events.

So even though you cannot see it, it still intercepts the clicks before any element under it.

A symbol is still an element and if it is on scene it will do the same regardless if the children elements it contains are moved off scene.

So first, we select the symbol and turn off its pointer events

Screenshot 2021-10-03 at 05.39.41
Screenshot 2021-10-03 at 05.39.411030×670 51.5 KB

We then delete the details timeline on the main scene.
And remove the on scene load to start the details timeline.

We go into the symbol and on it's Main Timeline;

  • set the NameDialog group to hidden and opacity to 0 via the Element inspector.
    When an element is hidden it will not intercept mouse/pointer events because it is hidden from the DOM ( and you ).

  • We then go the symbol's details timeline (create it if need be );

  • Turn on recording
    Move the play head a couple of frames along and set the NameDialog group to visible via the Element inspector .
    This can just be 2-3 frames after along as this property is either on or off and does not animate .

We still use opacity so we can get a nice fade in/out.

  • Still recording mover further along the timeline and set opacity to 100%.

Stop recording.

The timeline should look like this.

Screenshot 2021-10-03 at 06.27.27
Screenshot 2021-10-03 at 06.27.27794×734 72.9 KB

The OK Button.

Screenshot 2021-10-03 at 06.28.35

The Cancel button just needs to continue the details timeline in reverse.

Exit the symbol.

On the Main timeline

We add a Symbol action to start the symbols details timeline.

Screenshot 2021-10-03 at 06.32.44
Screenshot 2021-10-03 at 06.32.44840×724 91.6 KB

Now go into the detailPromptFunction() and remove the line

hypeDocument.setElementProperty(namedialog, 'opacity', 0, 0.1, 'easeinout');

That should be it I think..

BrowserOnSceneLoad_vmh2.hype.zip (27.1 KB)

4 Likes
6

Wow thanks for all that effort stepping me through that. I only dabble in Hype occasionally so its not hard to get myself confused. I didn't understand the symbols concept having the timeline within it, and also how to set objects to not be affected by pointer events.

I'm sure others will find your tutorial in this post valuable so I hope they can find it. I definitely
prefer this than JS prompts for alerts and prompts, especially if a page is embedded but hosted elsewhere, and the JS (at least in Firefox and Chrome) indicates to the user that the alert has a different domain than the page they are on, which could make them suspicious.

Thanks again, I'm sure I can implement this correctly now. Cheers.

2 Likes
7

I had a similar problem with a project a few years ago. I'll come back to this tutorial when I need to do something similar again.
Thank you!

1 Like