Javascript

Bootstrap Studio Help
1

I'm ready to start adding some js to my web pages but not sure how to proceed. I see I can create my own js file. Are all scripts in the file included on every page? I guess that would work but my js functions are often only used on one page.

Also, is there a way to control where the js file is inserted (at the top of the html file, at the top of <body>, at the end of the <body>

Thanks, Pete

2

All pages of a project will contain the same JS and CSS files. That's fairly standard and caching should resolve any issue of re-requests from the server when changing from page to page.

It's fairly standard now as well to load JS at the bottom of your sites to better help with code blocking and faster delivery of the site.

Saj

3

OK thanks. So does BSS load the js files at the bottom of the page automatically?

4

Hiya Phaworth,

Yes they are loaded at the bottom automatically. If you right click on the Javascript category of the Design area at the bottom right of the window, you will get a menu that gives you the option to change the Include Order of your scripts. Note that this will not be visible in the Design tree, that is alwas in alpha order, but it will export them in the correct order you set them at. That's the same for the Styles as well.

5

Great, thanks for the info. I have to admit I don't fully understand why some javascript functions don;t work unless they are at the end of the html file but as long as they do, that's good with me! Pete

6

One quick follow up. When I right-click on the Javascript heading, the Include Order item is disabled. I've added my own js file to the list but it's currently empty, could that be why?

7

The JS doesn't "need" to be at the bottom it's just better that they are for client/server requests which helps in loading the site faster. Especially if JS code is an external source. If it's an external source then the site usually has to wait for that HTTP request to complete before it can continue to deliver the site.

Saj

8

I think it's only going to highlight if you have more then one custom/extra JS source. You can't change the order of the 2 required scripts, jQuery and Bootstrap.

Saj