JS Guide

So far we haven't covered JavaScript at all! Well unless you count the editing of the config file. Static Ultra handles JavaScript files in a very similar manner to how it handles stylesheets.

Site-Wide JavaScript

Sometimes you want JavaScript to run regardless of theme or page. Maybe you're using a library or a third party script.

Static Ultra enables you to have as many side-wide scripts as you want, and you can name them whatever you want.

Open config.js for editing. Scroll down and you'll see a section like this:

this.SITE_SCRIPTS = [ "main.js" ];

As you can see, Static Ultra comes with just the one site-wide script, main.js. But you could add more:

this.SITE_SCRIPTS = [ "my-library.js", "my-library-extras.js", "main.js" ];

Open up main.js for editing, and you'll see the following:

function SckStaticUltra_Site() { this.init = function() { console.log( "sckStaticUltra_site.init()" ); // Do site-wide stuff here! } } var sckStaticUltra_site = new SckStaticUltra_Site();

The way it works is, Static Ultra loads all of your site-wide JavaScript files at once, and then tries to find the sckStaticUltra_site.init() function. If it exists, it calls it. The above code can be in any of your scripts, but should only be in ONE of them.

As an example, the config.js for this Static Ultra website you're looking at now is as follows:

this.SITE_SCRIPTS = [ "js/prism.js", "js/main.js" ];

Prism.js is a free syntax highlighting library that colours in all the code blocks on this site. However to make it run, I need to manually run it once Static Ultra has loaded, so my main.js looks a bit like the following:

function SckStaticUltra_Site() { this.init = function() { Prism.highlightAll(); } } var sckStaticUltra_site = new SckStaticUltra_Site();

This saves me having to include Prism on every page that uses it, because it is loaded and ran on every page.

Theme Specific Scripts

Sometimes you want scripts specific to a certain theme. For example, in some of the themes on this Static Ultra website, I use JavaScript to transform the menu into a clickable button that expands and collapses when the user is using a mobile device with a smaller screen.

You've seen already how you can use scripts in a theme and Static Ultra will automatically update the URLs when it pulls the theme into your site. However it's also worth noting that Static Ultra has a class and function much like the site-wide ones. Go to themes/default and open up main.js for editing, and you'll see the following:

function SckStaticUltra_Theme() { this.init = function() { console.log( "sckStaticUltra_theme.init()" ); // Do theme stuff here! } } var sckStaticUltra_theme = new SckStaticUltra_Theme();

As with site-wide scripts, if the above exists in one of your theme scripts Static Ultra will call it. And that's your entry point for doing theme related stuff (e.g. doing clever stuff with menus or whatever).

Page Specific Scripts

And finally, sometimes you just want scripts only on a specific page. Let's explain this one by example.

Right here, we have a button! A page specific script makes it say hello when you click it!

The above button was made with the following html code:

<p> <input type="button" class="js-test" value="Click Me!"> </p>

The page script is located at js/js-guide.js on my website.

To include it in my page, I put the following just before <!-- Page Content Begin --> in this page.


And JS Guide contains the following:

"use strict"; function SckStaticUltra_Page() { this.init = function() { console.log( "sckStaticUltra_page.init()" ); // Select button with class .test-button var testBtn = document.querySelector( ".test-button" ); // Call the sayHello() function below when button is clicked testBtn.onclick = sayHello; } function sayHello() { alert( "Hello!" ); } } var sckStaticUltra_page = new SckStaticUltra_Page();

As with site and theme scripts, Static Ultra loads all the specified scripts, looks for the sckStaticUltra_page.init() function and calls it if it exists.

If you have multiple scripts on the same page, you can include them like following:

<!-- [STATIC_ULTRA_SCRIPTS] js/js-guide.js js/some-other-script.js js/some-even-more-other-script.js [/STATIC_ULTRA_SCRIPTS] -->

There's one more thing you might want to know about. And that's re-usable HTML blocks!