Add custom JavaScript to an IU Web Framework site

• Overview
• Add your custom JavaScript to site.js
  • Variables in scope
  • JQuery
  • Include other JavaScript libraries
• Add JavaScript to individual pages

Overview

The IU Web Framework allows website developers to add custom JavaScript to a website created with IU's Web Content Management System (WCMS). As a website developer, you can use this JavaScript to add new behavior to support custom sections and other interactive elements you might create for your site.

Add your custom JavaScript to site.js

Each IU Web Framework site comes with an _assets/js/site.js file in which you can write any custom JavaScript needed for your website.

The site.js file will already contain some site-specific code, such as that needed to power Google Custom Search. Add your custom JavaScript above any other code in this file.

Variables in scope

The variables listed below are already defined and used by the IU Web Framework. Avoid declaring new variables with these names or reassigning the value of these variables in your custom JavaScript.

• IU
• IUSearch
• Modernizr
• jQuery
• $
• Foundation
• google
• googleAltLoader
• googleNDT_
• enquire
• eventie
• imagesLoaded
• matchMedia
• yepnope

JQuery

The IU Web Framework imports the JQuery library. The JQuery object ($) and its methods are available for use in your custom JavaScript; you do not need to reimport the library.

Include other JavaScript libraries

If you need to include other JavaScript libraries to power your custom code, you can do so by adding the appropriate <script> tags in _includes/javascript.html:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://assets.iu.edu/web/3.3.x/js/iu-framework.min.js"></script>
<script src="https://assets.iu.edu/search/3.3.x/search.min.js"></script>

<!-- Import your libraries here. -->

<script src="/_assets/js/site.js"></script>

Include your JavaScript libraries before you include your site.js file (see example above).

You'll need to republish javascript.html for your changes to take effect.

Add JavaScript to individual pages

JavaScript can add significant overhead to a web page. In general, best practice is to avoid loading JavaScript code on a page that doesn't require it.

In situations where only a select few pages have elements that need custom JavaScript, use the process below to add JavaScript on a per-page basis.

1. Upload or create your page-specific JavaScript file

1. Upload to or create this file in your site's _assets/js folder. Give your page-specific custom JavaScript file a meaningful name that will help you remember what page interactions the code powers.
2. Publish this JavaScript file.

2. Create a copy of _internal/blocks/page-js

1. Create a copy of _internal/blocks/page-js, which you'll use in the next step to include your page-specific custom JavaScript on individual pages. Give your copy of the page-js block a meaningful name that will help you remember what custom JavaScript file the block includes.
2. Open the new block you just created and click the Edit tab near the top right.
3. Under "File", click Choose File and find the page-specific JavaScript file you created in step 1:
   
4. Save your changes.

3. Attach your custom JavaScript block to the pages that need it

1. Open the page where you want to add your page-specific custom JavaScript and click the Edit tab near the top right.
2. In the editing window, click the Configure tab near the top left:
   
3. Scroll down until you see options for a region called "JS-PAGE". These options include Choose Block and Choose Format:
   
4. Click Choose Block and find the JavaScript block you created in step 2.
5. Click Choose Format and select _internal/velocity/Page/Single Page - JS:
   

4. Save and publish your page

Save your changes. You'll need to republish a page after you add page-specific JavaScript.