Script Integration - JS/HTML/CSS

Greetings!
I am quite hopeful there is a simple way to integrate outside script with our document:

counter.zip (2.7 KB)
21.zip (139.9 KB)

We have a folder with html/css/js - but can not quite figure out how to get the file to display/function within that document. Any assistance would be most helpful :slight_smile:

Thanks in advance.

1 Like

Have a look at

Once installed in to Hype it will allow you to export the project in a form that would match what you have, you could then move the exported files from their folders to the corresponding folders you have already.

Great, thank you.
Is there a particular script that should be installed?

I am really just trying to get what is in that zip file - into a Hype document. I realize this is a great community with everyone helping everyone to become code monkey's. I don't want to become a code monkey - I wish to find someone who we can hire to help us with several different scripts. This one I purchased from some dude on Fiverr.... seems like nice code - but I can't figure out how to integrate it.

Apparently every javascript guru on Fiverr is on Wintel, and no one has every heard of Hype.

Might you suggest a way we can find/hire ongoing project help?
Sorry to get a little huff there, just at my wits end trying to secure what we need.
Thanks for the response.

To clarify, you'd like to put the contents of the "counter" (vanilla html) in the 21 (hype-based) document?

Are you able to attach a zip of your .hype document?

You should just be able to do it via steps:

  1. drag the style.css file into Hype's resources library.

  2. Then add an unstyled rectangle element and choose 'Edit > Edit Element's Inner HTML' and paste everything from the body of the index.html and remove the final <script src="counter.js"></script> line.

  3. Then add an On Scene Load handler to run javascript and paste the contents of the counter.js file.

1 Like

Jonathan.
Thanks for your time.

Those three steps did the trick. :slight_smile: There are some style issues, but I think I should be able to muddle through those, thank you.

I am just a hack. I use 20 different apps everyday, and know just barely enough to be dangerous (and flood great communities like this one, with stupid questions and calls for help).

I have been using Hype like a pro version of Keynote since 2.0… know enough to make the timeline work, add a media file and some scene dissolves. Out of ALL the stuff I have/used this community is by far the absolute best, robust and most generous group of users. I wish I were as passionate about creating and using code as members are, but …. Come here, and 99% of the time within 24 hrs, someone has created the exact file you need.

Very grateful, thank you guys.

I noticed that the Forum for Freelancers is no longer available? How best to go about looking for paid assistance?

1 Like

Sorry if confused you there, I miss read your post.

Hello Jonathan...
I wonder if I may call on your experience further.... we have file integration, however it is unique to each scene. I am curious if there is a way to load it once and have it (function) and display across all scenes?

Your time is most appreciated.
Thank you.

21.zip (144.7 KB)

Hi Mark.
No worries, your time is appreciated.
Thanks.

1 Like

It's here: Freelance - Tumult Forums

If you are using Hype Pro, you use Persistent Symbols by selecting the Rectangle element and choose Symbol > New Persistent Symbol from Selection and add it to all scenes.

You'll need to make a minor modification to the javascript code to make sure it isn't run multiple times by putting something like this at the very top:

	if(window.hasInitializedCounter == null) {
		window.hasInitializedCounter = true;
	} else {
		return;
	}

Sample:
Clock.hype.zip (50.7 KB)

1 Like

Hi Jonathan.... thank you kindly.
I downloaded your file and have gone through it back and forth.... but I can not replicate the same effect with my own file.

I get the concept of persistent symbols, but HOW do you put the script into the first symbol? I've clicked into the Symbol, added a rectangle and pasted the html in there... it looks like the Symbol is attached to the script. In comparing your file, scene one has 'On scene load'.... and the Symbol has on symbol load timeline.... I've gone through every option in the inspector and it doesn't seem that your symbol (other than on-scene-load) is attached to the script?

Sorry to be such a noob.... your time is much appreciated.

21.zip (143.7 KB)

So the idea was to select your existing rectangle with the clock and making it a Persistent Symbol.

Here it is. Note I also put everything into a Group to help with positions.

21__v2.hype.zip (261.1 KB)

1 Like

Hi Mark.
Wow! Thank You. It is exactly what we have been trying to do...
(and put everything in a group to help with positions - been struggling with that too). Many thanks.

Man, I don’t know if you guys all get together for a Hype keynote / users group, but you should put a tip jar on this site somewhere… and use those dollars to help off-set an open bar for an hour or two, or something. I would gladly stick a few ponies in there with every fix/reply… so helpful and generous. Thank you!

Time to track down a few Hype persistent symbol tutorials :))

3 Likes

Thanks @MarkHunte!

1 Like