init a script

Bootstrap Studio Help
1

I'm usins AOS (animate on scroll) o a site of mine https://github.com/michalsnik/aos

so i add

``` 
</blockquote>

<p>and</p>

<blockquote>

</blockquote>

<p>to my BSS project- No wi have to init the script, putting</p>

<blockquote>

</blockquote>

<p>&lt;script&gt;
&gt;         AOS.init();
&gt;       &lt;/script&gt;</p>

<p>at the end of the body, AFTER the .js src command. But if i try to add a custom code block that gets before the js loading, so it's not working. I could use a user.js file to load it after the other scripts, but i don't know how to modify the init() to have it run after all the scripts has run (on document ready? ).
I could face the same issue with a few more scripts, like smoothScroll so i'm curious to know what's the standard way to manage the function.init() and other functions that must be run after all .js are loaded.</p>
2

(how do i edit my own posts?)

--- SOLVED ---

to execute at page ready just use this code in the external user.js file:

$(function() 
   AOS.init();
});

still the main issue remain. How do i put a <script> code </script) inside the html, just before the </body> and after all external .js ?

3

You would not load a script snippet code in the BSS app, you could do that after you have exported the project and manually edit the code.

However, it's better that you put all your script snippets and handmade coding in your user.js file.

If you don't know how to do that in the app, this is how you do it.

In the app bottom right is the DESIGN pane. Right click on Javascript and select "Create JS". Then if you start typing it should rename the file to what you want it named as. Double click that name to open it to edit it and put the following code in it.

$(function() { /* this is the jQuery equivalent of documents.ready */

    /* all scripting you do should go inside here for example */
    $("#hello-world").on("click", function(){
        alert("Hello World");
    });

    AOS.init(); /* this is your CALL to a function */
    /* "functions" should be outside this document.ready block and come before it */
});

Saj

4

To further add to Saj's information and touch on the other issue you asked about, you reorder the files using the Design panel as well. Right click over the Javascript section and choose the "Include Order" choice. Then put the files in the order you want them in and save it.

Keep in mind you will not see this in the list, the list will always show alphabetical in the app, but the page itself when exported will be correctly ordered.

This works the same for CSS files as well.