« MOD: Basics for jQuery Setup »
5 Throughout this blog and other useful resources for making modifications to Squarespace there are numerous references to using jQuery as means of modifying your Squarespace template. This article provides the basic information and resources to help point you in the right direction to get setup to start using jQuery on your Squarespace website.
What is jQuery? jQuery is a development tool which allows for easier, faster JavaScript development. jQuery.com says:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
We say jQuery is a great tool for making advanced modifications to Squarespace templates, or to make simple changes that you just can't do with CSS, and can't do without direct access to the source HTML. For example, you can:
- change text that is hard-coded by the system,
- insert new content anywhere you like,
- or take an element that's naturally positioned in one place & stick it somewhere else.
There are endless possibilities for how jQuery can be used to make any
Squarespace template unique!
STEP 1: Reference the jQuery Library -- First, you need to add script to the <head> code injection point that will reference the jQuery library.
- To access your Squarespace website's code injection panel, go to "Website Management" at the top left of your screen (when logged in), and then go to "Structure > Website Settings > Code Injection".
- The first injection point in the dropdown is <head>, all accounts have access to edit this area, an upgraded account is required to edit the additional code injection points.
- In the <head> code injection point, paste in the following to reference to jQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
STEP 2: Add Javascript Wrapper -- This sends out an alert that some javascript instructions are coming and works as a wrapper to contain your modification instructions:
<script type="text/javascript">
// we will add our javascript code here
</script>
STEP 3: Create a "Ready" Function -- jQuery functions in some way either read or manipulate the DOM (Document Object Model), and so they need to be triggered after the DOM is ready. So what we do is create a wrapper, and all jQuery instructions inside the wrapper will be initiated once the DOM is "ready":
<script type="text/javascript">
$(document).ready(function() {
// do stuff when DOM is ready
});
</script>
Another, shorter, way to write the same thing is:
$(function() {
// do stuff when DOM is ready
});
STEP 4: Add jQuery Content -- Now it's time to put some jQuery into your wrappers, here is an example of the basic structure from top to bottom:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$("#TargetName").doSomething();
});
</script>
What Does the Dollar Sign Mean? -- As you start looking at jQuery you will notice that it frequently makes us of the $ symbol. Basically, the $ is used to talk to the jQuery library. Each code block in jQuery starts out with the $.
Basic jQuery Structure -- jQuery, like any programming language follows a set pattern. For jQuery the pattern goes like so:
- Each code block starts with $
- The $ is followed by an open parenthesis (). Inside the parenthesis you tell jQuery what you want it to find, what element you are targeting.
- The target element in the parenthesis is followed by the event you want to apply to that target.
For example, in it's simplest form:
$("#TargetName").doSomething();
Demos -- Check out a great demo page on the jQuery website at:
docs.jquery.com/Tutorials:Live_Examples_of_jQuery
Additional Notes:
- You are not restricted to using jQuery in the header portion of a page -- it can easily be included within the html anywhere on the page.
- You can utilize any type of JavaScript in conjunction with the jQuery library.
Resources:
docs.jQuery.com / Getting Started With jQuery
AuthenticSociety.com / What Does the Dollar Sign Mean?
Experiment! Be Creative! 
Reader Comments (5)
Dana,
This is a very useful resource, thank you for creating it. I know I will be pointing people here from the Squarespace Forum.
--Chris
Hella Vuela,
I have tried like mad to incorporate the code for a "Drop Down Archive" list to no avail.The following code below represents what I have built so-far. I know I must be missing something, but not being a developer myself it just is not apparent. Any guidance is much appreciated.
Injection-- Widget--
<form id="dropdownBox" action="../">
<select name="dropdownList" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option selected>Posts »</option>
</select>
</form>
Thank you in advance.
Scott
Hi Scott -- In the <head> code the sectionContent ID needs to include a # sign at the beginning, like so: #sectionContent1234567
Also, you are using #sectionContent2791805 -- make sure that this section exists and that in it is a journal archive widget set to display a list of post titles for the journal page that the dropdown box can use as reference. To test you can temporarily remove the last line of the code that says "$("sectionContent2791805").remove();" so that the section is visible again, check to make sure there is a journal archive widget inside the section, and double check the section ID number to make sure they match what you have in the <head> code. Then add it back in, make sure that the sectionContent ID names include the # sign first, so instead they should be #sectionContent2791805.
The code in the <head> is essentially telling this section named (#sectionContent2791805) to take the items listed in it's journal archive widget and use that information for the list inside the dropdown box (the dropdown box should be inside a different sidebar section). then at the end of the code it is saying to remove the section with the archive widget so that you don't see the reference list.
If you are still having trouble you can email me login access to your site and I can go in and take a look. dana@en-vuela.com
Like any new technology, don’t expect to be an expert overnight. That’s why I’m suggesting starting now to learn and get comfortable.
Hi! I've been trying to follow your instructions to change the dreaded "Main" to something like "today's entry" (actually, in my case, "today's oscarina"), without success. I've tried every pull down option in the code injection menu, with this code (with the first asterisk replaced by the "<" symbol, obviously):
*script type="text/javascript">
// $('.journal-entry-navigation a:contains(Main)').each(function(){
var str = $(this).html();
$(this).html(str.replace('Main','today's oscarina'));
});
</script>
Is there any reason this isn't doing a thing? Have I slipped up somewhere?
I'd so appreciate your help.