Html file to include JS code (no linking)

Bill_Mac · October 27, 2020, 5:40pm

Problem: Not really a problem. I just wanted to be able to add the javascript code in the html file. I work at a school and just not ready to commit to a paid domain etc. (school blocks a lot of sites). I only have a few options atm. Some sites let you paste html code only. The problem is I don’t understand what the html code is doing

"
// script to load Saola Animate content into Container_ID div
(function(Saola) {
var li = {“color”:"#2090e6",“density”:9,“diameter”:60,“range”:1,“shape”:“oval”,“speed”:1};
Saola.openDoc(‘path/to/Saola Animate/content JavaScript file’, ‘Container_ID’, {"

I usually just add the script in tags on the html page and it works for other things i created (Wick editor). Not sure what to do in this (rare) case.

Saola Animate version: Newest one as of today.

OS: Windows 10

Notes:

ToanLS · October 28, 2020, 1:42am

Hi Bill,

HTML5 output contains multiple files, including HTML, JavaScript, CSS and resource files (such as images, audio, video). It’s not possible to include them all in one HTML file.

To upload HTML5 output to a web server and embed it into a webpage, please see this tutorial:

Regards

Bill_Mac · October 31, 2020, 11:41pm

Thank you for your reply. I don’t want to include the audio, video etc. Just INCLUDE the java script files. For example, i am able to open up the “splayer.js” and copy all the code from it and paste it between “script” tags in the index.html file. Works great (deleted the “splayer.js” file).

My problem is with the other .js file. I don’t understand what is happening under “function Saola()” in the html file that loads it all. I’ve tried to delete things and not make it a function using the link you sent me…no luck

I simply want to add that code under the script tags . As i explained in the original post, i work at a school that blocks many hosting sites so i just want to upload the resource folder and one html that has the javascript code included in the html (NOT LINKED). Example: Wix. It does not let you upload .js files, but i can paste html code.

Is there a way to change this code (from my index.html) to not have to load it from the external .js file? (i had to take out some tags for it to show here)
“div id=“FfMrrxJm” style=“position: relative; height: 100%;”>

(function(Saola) {
var li = {“color”:”#2090e6",“density”:9,“diameter”:60,“range”:1,“shape”:“oval”,“speed”:1};
Saola.openDoc(‘flatTire.js’, ‘FfMrrxJm’, {paused:false, preloaderOptions: li, center: ‘horizontal’, autofit: true});})(AtomiSaola);
</script"

ToanLS · November 2, 2020, 1:56am

Hi Bill,

You can take the following steps to include the JavaScript data file (flatTire.js in your sample) directly into the HTML file:

Export to HTML5
In the HTML5 output folder, open the data file which has the name in the form projectFileName.js (flatTire.js in your sample). Its content has the following format:

  (function(Saola) {
	var docData = {/* data for the animation document */};
	var f = [];
	docData.f = f;
	Saola.loadedDocs.push(docData);
  }(AtomiSaola));

Copy this content excluding the first line and the last two lines. The content need to be copied is:

	var docData = {/* data for the animation document */};
	var f = [];
	docData.f = f;

Open the HTML file, paste that content into the loader script and replace Saola.openDoc('projectFileName.js' by Saola.openDoc(docData

  (function(Saola) {
    // document data copy from external JS file
    var docData = {/* data for the animation document */};
    var f = [];
    docData.f = f;

    // preloader options	
    var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
    // open the document
    Saola.openDoc(docData, 'FfMrrxJm', {paused:false, preloaderOptions: li, center: 'horizontal', autofit: true});})(AtomiSaola);

Regards

Bill_Mac · November 2, 2020, 3:32am

THANK YOU!!! That worked.
Love this software… I’ve been looking for something like this for such a long time. Thank you for making it and helping me out.