Export your document and upload it to your server.
Note: Make sure the text.txt file you are loading is on the same domain as the Tumult Hype document displaying this content. This does not work loaded on your local machine.
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
var customTextElement2 = document.getElementById('f0');
customTextElement2.innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null);
Here’s a few additional methods to dynamically set the contents of elements:
// 1)
var customImageElement = document.getElementById('d4');
customImageElement.style.backgroundImage = "url(http://static.tumult.com/hype/press/media/HypeIconShadow.png)";
customImageElement.style.backgroundSize = "100%";
// 2)
var customTextElement = document.getElementById('b6');
customTextElement.innerHTML = "This text was set by Javascript!";
// 3)
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "https://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file has been found.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
var customTextElement2 = hypeDocument.getElementById('f7');
customTextElement2.innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null);
It will only work on a server – this is due to browser restrictions, specifically CORS rules. Since your .txt file is accessed via the ‘file://’ protocol, it is blocked.
Great – so the text attributes can be set set. Now
how about line breaks (text formatting) in the text itself?
Without line breaks the whole imported text will result in
a text block, which is not ideal for reading.
Example:
In case somebody wants to change the text content of
the (Hype) website simply by uploading/updating text
files onto a server. Then text style (font,size,color) will
be the same, but line breaks won’t be possible.
Hi I have implemented this on my server but am having problems!
The text fails to load or is slow to load if you navigate to a new scene and return to the original scene with the dynamic text?
I have a feeling it could be due to slow or intermittent internet speeds but cant be 100% sure?
The app i am building will be in schools and i cant afford to have text or images not loading on screen can you please advise @Daniel
Also is there a better way to bring text and images in such as json/xml? The project is complex with 60 scenes and alot of text and images so am trying to build a dynamic template going forward!
Yes, you have to run the txt file on a server. I have another example of external text that is using a JS file, and that will run locally. example.zip (117.0 KB)
This is pretty cool! Thank you for sharing Daniel. I realize this thread is pretty old but wondering if you could expand on this. I was able to get number 3 to work where it imports a number from an external text file on my server into a text box. Do you know how to expand this to encompass several text boxes in Hype that will contain different bits of text (prices)?
So say I wanted to have the average house price across the country by province and I had text boxes with unique IDs: OntPrice, QuePrice, BCPrice…
How would that work?
Would a json file with the data maybe work better in that case? Something that looked like this?
Or is there a way to do this as a text file as well?
{
“OntPrice”: “105,000”,
“QuePrice”: “99,000”,
“BCPrice”: “86,000”
}
and how would the javascript be changed to bring in those values? Any help would be appreciated!
thanks. That simple.