Using Jquery Library

Using JavaScript with Hype
1

Hi,

First, thanks for the team, for such a wonderful product that helps designers or coders create HTML 5 apps, presentations, etc…

Now, to my question, I was using Brackets to code an HTML5 application using the Jquery library, and when I found out about Hype3, downloaded and trying it out…but having somewhat difficulty understanding the workflow of Hype, for example:

I created an element - Rectangle, and gave it an ID # and I’m trying to execute a .js file array within this

, but it’s not doing it. I’ve tried within the innerHTML of div like below:

**<script src="test.js"></script>**, I’ve also added the js file into resource but without include in header. However, nothing shows on

when I test in Firefox Browser.

Next, I’m using the Jquery library, using the getScriptlike below:

**$("#specialversecontainer").$.getScript(“test.js”);**` And still nothing…

May I ask what is the proper way of executing a js within Hype, I would preferred to use external js since my content will be contained there…Would appreciate any feedback, help…Thanks and God Bless…

Sincerely,

Sunday

2

Here’s how to reference a file in code: http://tumult.com/hype/documentation/3.0/#referencing-resources-in-code

If your .js file exists in the resources library, you would reference it like:

<script src="${resourcesFolderName}/test.js"></script>

You should include this in your head area to reference it elsewhere in your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

3

Hi Daniel,

Thanks for the response, much appreciated it.....Ok, I've already referenced in my rectangle element like in documentation, but it doesn't appear, here's the .js:

var verse=['Testing 1','Testing 2','Testing3'];
document.write((verse).join('<br/>'+'<li>'+'<p>'));

If I include in the header, it will show, but I would like to show within the rectangle element? Thanks again for your help.....God Bless....

Sincerely,

Sunday

4

You would run this as an 'On Scene Load' JavaScript function (video on how to do that).

Not sure what you mean by this.

5

Hi Daniel,

Thanks for the link and help, still trying to grasp this, so I've tried the below:

function test (){ var verse=document.getElementById("specialversecontainer").src=['Test1','Test2','Test3'];
document.write((childrenverses).join('<br/>'+'<li>'+'<p>'));};

Now, I've named a Rectangle in my scene ID = specialversecontainer, and on that particular Rectangle, I've applied an OnSceneLoad with the following:

function loadtest (HyperDocument, element, event) {
test();}

So what I'm trying to accomplish is for the array content to appear within the specialversecontainer. Maybe, I'm taking the wrong approach? I've also tried within the innerHTML of such div: with below:

script src="${resourcesFolderName}/test.js"></script>

And still nothing........? Thanks again for your help.......God Bless....

Sincerely,

Sunday

6

Can you share your document?

7

Hi Daniel,

A thing i've noticed now, is that in the Scenes Column, I can see the js executed with regular expression like below:

script src="test.js"></script>

However, on the canvas I don't see the actual js executed, nor do I see it when I preview under browsers, Firefox, Safari, Google Chrome...... Is this normal? Is the app, supposed to work like this, especially when it's . Sorry, for all the questions, but trying to learn the workflow.........Thanks again for your help.....God Bless....

Sincerely,

Sunday

8

Just some commentary… and I’m using an iPad, so the helpfulness is limited.

  1. You might not need jQuery. http://youmightnotneedjquery.com
  2. If you’re trying to manipulate text in an element, based on data from an array, you might want to look at this… https://photics.com/free-template-tuesday-11-tumult-hype-multilingual/ …or this… https://photics.com/free-template-tuesday-7-tumult-hype-capitals/

There’s no jQuery needed. It’s basically a JavaScript Array and using innerHTML to replace the text.

9

This is expected.

this is not expected...

Can you share your document? We're flying blind here.

I said above:

So you shouldn't be putting this on the Scene area, or in the Scene 'On Scene Load' area. References to other JS files should occur in the head. You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector. Or, drag your JS file into your resource library and then it will automatically be included in he head.

10

Hi @Daniel,

Here's the test document.....test.hypetemplate.zip (14.6 KB)

Thanks for your help.....God Bless....

11

Hi @Photics

Thanks for the info, really appreciated it.....The thing is that I'm building an HTML5 app Touch to be used like a kiosk, and have a file that's like 40,000 records, and Jquery gives me the ability to autosearch, filter, or read json, text files, etc..... and having it on an external file (.js, json ). I really n't declare a **variable array within hyper, with over 40,000 lines....... The other option is to have server side dbase, but I want my app to not have access to the internet, and be just standalone with no dependency on internet.....I hope you understand.......:slight_smile: Just trying to learn with this trial period Hyper, which i find very nice working with, instead of using hard code ( brackets ), which will be my last option....I feel that Hyper cuts down on production time......:slight_smile: Thanks again for your guidance and help........God Bless.....

Sincerely,

Sunday