Jay Whaaaat?
The Magic of jQuery in Squarespace

jQuery is a framework allowing you to write easy snippets of JavaScript to change a website's content and structure. It's especially helpful with Squarespace because of its expressive power enabling you to change the underlying CSS and HTML that Squarespace generates on your behalf, that is otherwise untouchable without taking your entire site into Developer Mode. 

Note: Taking a site into Developer Mode makes you into the one responsible for all future bug fixes and enhancements, including to all the template code you didn't write to begin with and probably don't have the time nor interest to try and understand. Moving a site to Developer Mode is not a light decision, and most customers are best off in avoiding it. 

My First Time

I've recently begun learning jQuery, and Figures 1 and 2 show my first-ever jQuery solution. It was written in response to a plea for help on the Squarespace Answers forum. The Pacific template makes no provision for a tagline under the site logo (Figure 1), and the person asking for help wanted such a tagline (Figure 2). It is jQuery that took me from Figure 1 to Figure 2.

Figure 1. Pacific does not support a tagline

Figure 2. But we can add one using jQuery

I can't stress enough the need to be comfortable with HTML and CSS before proceeding. jQuery is a JavaScript framework, and JavaScript programming builds upon your knowledge of HTML and CSS. Writing JavaScript without knowing something of HTML and CSS is like building a house without first learning how to hammer nails. You might get the job done, but you'll bang your thumb a few times in the process.

Caution! Knowledge of CSS ad HTML required. Proceed at own risk.

Loading the Library

jQuery is a fairly large library of JavaScript code written and maintained by the jQuery Foundation for you to freely employ in any website. Your first task is to load the library into the browser of anyone visiting your site. Do that by writing a script tag like the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

Google hosts jQuery and numerous other libraries, and they are all listed on Google's Make the Web Faster page. Go there and scroll down to see the specific URLs for the different versions of jQuery that Google chooses to host and make available. You'll see that my tag above specifies the URL given for jQuery version 2.1.3.

Where do you place the script tag? Good question. Here's what to do:

  1. Start at your site's configuration page
  2. Go Settings -> Advanced -> Code Injection
  3. Find the field labeled "Header"
  4. Paste the script tag into that field as shown in Figure 3

jQuery is now available for use from any and all pages of your site. Don't worry about performance impacts from loading the library multiple times. Browsers are designed to keep track of source URLs and load libraries like jQuery just one time. Many sites load from Google, making it likely that any visitors to your own site already have the library loaded and cached and ready to execute. 

Figure 3. The Header field at Settings -> Advanced -> Code Injection

Waiting for the Page to Load

Following is a good skeleton to use for jQuery solutions when you're just starting out. It ensures the current page loads before any code you've written executes, and you'll learn shortly why that matters. 

<script>
  $(document).ready(function(){
    /* Your code goes here */
  });
</script>

Here's a quick rundown of what this code is doing for you:

  1. The $ at the beginning invokes jQuery to begin execution of your script
  2. The reference to $(document) makes the currently-loading page available for modification
  3. Invoking the ready(...) method causes jQuery to wait until the page loads completely
  4. Then function() {...} is invoked when the page is completely loaded

The syntax may be intimidating if you're unaccustomed to writing code. Consult a good book if that's the case, or work through a good tutorial on the web. 

The reason for Step 3 is that a browser's default behavior is to execute JavaScript (which includes jQuery) immediately upon encountering it. JavaScript in your page header will execute before the content portion of the page is loaded. You of course want to make changes to that content, and hence the invocation of the ready(...) method to pause while the content loads completely. Otherwise your code will execute ineffectively before the content is available to be changed.  

Adding the Tagline

Right-click the logo in a site built on the Pacific template. Select Inspect Element from the fly-out menu. You'll see results similar to those in Figure 4. Look closely and see that the logo image lies inside a hyperlink (the <a> tag), which in turn lies within a Heading-1 element (the <h1> tag), which finally lies within a div element (the <div> tag) named "logoWrapper". 

Figure 4. The site logo lies within an <h1> tag

Let's look at adding a tagline as an additional div element. It's a bit of a judgment call as to where and how to insert new content. The logo image lies in a div all its own, so it's reasonable to insert the tagline immediately following and also in a div of its own. jQuery makes this an easy task.

You can reference the div holding the logo by writing $("#logoWrapper"). For example:

<script>
  $(document).ready(function(){
    $("#logoWrapper")
   
});
</script>

This code produces no visual effect, and merely references the element named "logoWrapper". Now invoke the after(...) method to insert some new HTML immediately following the"logoWrapper" element:

<script>
  $(document).ready(function(){
    $("#logoWrapper").after(
      '<div id="tagLine"><p>A Washed-up Programmer Recapturing the Magic</p></div>'
    );
});
</script>

Pass the HTML to add as a text parameter to the after(...) method. Take care about quote marks. You can enclose the string in either single- or double-quotes. I chose to enclose in single-quotes because doing so allows me to have double-quotes as part of the string that I'm passing.

Putting everything together so far and adding some comments to help keep track of things gives the following code:

<!-- Load the jQuery API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<!-- Inject a tagline into the page's content -->
<script>
  $(document).ready(function(){
    $("#logoWrapper").after(
      '<div id="tagLine"><p>A Washed-up Programmer Recapturing the Magic</p></div>'
    );
});
</script>

Compare Figure 5 with Figure 4. Do you see the new "tagLine" div in Figure 5? That and the paragraph inside are what have just been inserted into the page's HTML via jQuery.

Figure 5. The newly-inserted tagline

The expression $("logoWrapper").after('...') finds the element named "logoWrapper" and inserts additional HTML immediately following that element. The additional HTML is a new div holding a tagline paragraph for the site. 

Formatting the Result

View the site now and the tagline will look awful. You won't see the easy to read, green tagline in Figure 5. Some formatting is needed first. Provide it via CSS like the following:

<style>
  #tagLine {
    color: #97c21a; 
    font-family: "Raleway";
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 600;
    text-align: center;
  }
</style>

I made sure to specify id="tagLine" as an attribute in the div inserted earlier. That makes for easy targeting from CSS. Raleway is a font already in use elsewhere on the same page, which is the reason I'm able to reference it from custom CSS.

All the code goes into the Code Injection Header field shown earlier in Figure 3. Here's the complete solution:

<!-- Load the jQuery API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<!-- Inject a tagline into the page's content -->
<script>
  $(document).ready(function(){
    $("#logoWrapper").after(
      '<div id="tagLine"><p>A Washed-up Programmer Recapturing the Magic</p></div>'
    );
});
</script>

<!-- Apply a CSS rule to control the appearance -->
<style>
  #tagLine {
    color: #97c21a; 
    font-family: "Raleway";
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 600;
    text-align: center;
  }
</style>

Figure 6 shows the final result -- a green tagline just under the site logo. The tagline sits in its own div that is easily targetable, and and you can format as you please.

Figure 6. A tagline on every page

Watch my blog for more on using jQuery with Squarespace. If you're interested in diving in and learning more right now, then have a look at the W3Schools jQuery Tutorial. And Jon Ducket's book JavaScript and jQuery looks to be a good book for absolute beginners. (Those with programming background will find themselves turning the pages too quickly). 

Note: The solution in this post is specific to the Pacific template. Like with CSS, anything you do involving jQuery will often be specific to whatever template you happen to be using. Solutions for one template should not be dropped into another without some upfront research to be sure they'll deliver the desired results in their new home.

Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart