Code

JavaScript Guide

JavaScript is a programming language designed specifically for the web that is used to manipulate HTML objects on a web page. Using javascript you can make more advanced modifications to your Squarespace site. For example, you can customize journal entry comments text, redirect author links to custom profile pages, put sidebar widgets in your site footer and apply dynamic behavior to other site elements. This guide provides an overview of how to implement javascript in your Squarespace site as well as basic examples and best practices to help you get started.

Note: Using javascript within your site is an advanced modification — programming knowledge is required.

Using JavaScript

Within Squarespace, javascript may be written into any HTML page (client-side). Since it runs locally and works within your web browser, script functions are executed quickly. This allows for more immediate interaction between your website and site visitors. A common example of this is the toggle function to show or hide content on mouse-click.

To include this script in your Squarespace site you will need to edit the Extra Header Code (within < head > tag) in your site's Code Injection area, your CSS file and the HTML of your page.

1 In the dashboard, navigate to Code Injection and select the Extra Header Code (within < head > tag) field. Then apply the JavaScript code shown below by pasting it into the header field — and save the change.

<script type="text/javascript">function togglecomments (postid) {var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

2 Within the style editor, navigate to the Custom CSS pane, paste in the code below and save the CSS change.

.commenthidden {
display:none;
}
.commentshown {
display:inline;}

3 Reference the script function within the HTML of your page in Raw HTML mode using the format shown below.

<p><a href="javascript:togglecomments('demo')">Your link text here.</a>.</p>
<div id="demo" class="commenthidden">
<p>Your toggled content here. </p>
</div>

Note: you can implement this script as many times on a page as you may want, however, you will need to change the ID name (shown as 'demo') to a unique id name for each instance. For example, 'block1', 'block2', 'block3'. You will also replace the 'Your link text here' with the text for your actual link; as well as replace the 'Your toggled content here' with the text and content you want to show / hide. 

Using JavaScript Libraries

A JavaScript Library is a library of pre-written code that simplifies the programming process. Most libraries available on the web provide extensive documentation such as implementation instructions, live demonstrations and getting started guides.

Examples of popular libraries include jQuery, Mootools and the Yahoo! User Interface Library (YUI) which is built into the Squarespace platform.  It is the YUI framework that supports many native functions of your Squarespace site. For example, it allows you to pick colors for text and other elements using the color picker, and enables the ability to move pages, widgets and other elements around your site dynamically.

Most javascript libraries you would include within your Squarespace site can be referenced by direct link to an existing distribution network such as Google Libraries.

However, there are also custom scripts authored by third parties that are dependent upon existing libraries. To implement a custom script into your Squarespace site, you will need to upload the author's script to your own file storage, and reference it in your site header element along with the javascript library that it relies upon. An example implementation is shown in the hover tool-tip demo below.