Jump to content

How can I add jQuery to my site?

Recommended Posts

I have read the documentation on how to load custom JavaScript into the developer site, such as jQuery. I have implemented it the way the documentation suggests:

<script>window.jQuery || document.write('<script src="scripts/jquery-1.9.0.min.js"><\/script>')</script>

Loading the JavaScript file that I have uploaded to my ‘scripts’ directory on the server. That returned an 404 error saying that the file doesn’t exist. Because it was looking under /index/scripts/.. which of course does not exist. Thus the documentation is wrong.

I then went ahead and wrote this:

<script>window.jQuery || document.write('<script src="../scripts/jquery-1.9.0.min.js"><\/script>')</script>

Adding a ‘../’ infront of the referenced source. This stopped the 404 error meaning that the script does get loaded. But it’s not affecting anything on my page as expected?

I'm starting to fail to understand the benefit of using the squarespace developer platform as it posses more errors than suggested solutions. Any help would GREATLY be appreciated!

Link to comment
  • Replies 6
  • Views 63.8k
  • Created
  • Last Reply

You can also add jQuery to your site via Settings > Code Injection > Header. Then place the following into it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Putting this into your site on Squarespace will allow you to use jQuery on your site. It can also be placed on individual pages if you so need it.

Also remember that if you use JavaScript files, images, and CSS they all have to be placed appropriately on your site. For Squarespace that is straightforward if perhaps a bit confusing.

  • JavaScript files, images, etc.: These should be created as links referencing files that can be dragged and dropped into the Link widget of the Content Creator. When you have done that it make certain to note the URL which will be something like /s/myfile.js or something.
  • CSS is best placed onto the individual page. If it is site wide you can add it to your code injection as a reference. Make certain to check via browser inspector to insure that your external reference is not running into errors such as not being found and what not.

Once you have all the elements in place you can then reference them via Code Block within your page.

Brief instructions on how to add jQuery on my site.

Hope this helps!

Link to comment
  • 3 weeks later...

Also consider that adding a "non-secure" script on a secure site (depending on your browser) will temporarily block insecure (un-secure? non-secure?) items. On Chrome, you may have to click the "shield" in the address bar (and select 'load anyway') to load the code.

The site is only "secure" to those who are logged-into the site as a site member.These include [A] Trial Mode, or when pages or the site is locked, and you have to enter a password to access the site or obviously when you're a site contributor with a password.

The best workaround is to make the jQ script (and other externally-referenced scripts) "secure" by adding https.

alt text

Link to comment
  • 6 years later...

Hi @Relborg , I made a video tutorial for you on how to Add JQuery to Site. Hope this helps! https://www.askquesty.com/post/add-jquery-squarespace-tutorial

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.