Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Relborg

How can I add jQuery to my site?

Question

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!

Edited by Relborg
Tidy

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 10

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!

Edited by altank

Share this post


Link to post
  • 2

@alanhouser Or, event better, you can use a protocoless URL. You do that by just leaving out http: altogether. So you'd have //ajax.googleapis.com... Protocoless URLs inherit whichever connection type - secure or insecure - is in the address bar of the browser.


Developer Evangelist at Squarespace.

Share this post


Link to post
  • 1

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

Edited by alanhouser

Share this post


Link to post
  • 0

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

Edited by AskQuesty
Initial Revision

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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...