-1

I thought this would be easy. I added this code injection into the header. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>$("img").addClass("example")</script>

The scripts appear in my page source, but have no effect adding a class to images. I've tried very specific div classes and ids, and other script variations, but again no effect.

Does Squarespace somehow prevent assigning classes? The image I'm trying to target currently has no class assigned to it. Squarespace gives every element a unique ID, but these can't be selected because they change every time the page is loaded.

Chris
  • 167
  • 3
  • 18
  • Squarespace does not prevent assigning classes.. use parent block-ids to target images individually. As for why your code isn't working.. are you pasting it to the fields "header/footer injection" or into the header/footer? – jfox Aug 15 '17 at 08:32
  • Into the header injection - I've tried it on both individual pages and site-wide with no effect. I did this once before on Squarespace about a year ago with success. This seems to be a new conflict or problem. As for targeting images through block-ids, that's impossible on Squarespace - block ids (starting with "yui-") change each time the page is loaded. I have to find a parent class and specify with nth child. – Chris Aug 15 '17 at 12:34
  • This sounds to me like it is related to a common problem. Please state the template you are using and consider providing a link to the site/page in question. – Brandon Aug 15 '17 at 12:43
  • @Chris Nope, any id's starting with yui_ are dynamic, but block_yui or block- are stable and perfectly fine to use. Been using them in ss for the last 8 or so years. – jfox Aug 16 '17 at 01:02
  • I'm using the Shift template. – Chris Aug 16 '17 at 22:37
  • As for block_yui IDs, I see no block ids on the entire page, only yui – Chris Aug 16 '17 at 22:39
  • Look harder? Put your glasses on? Use the search tool? Ask a question that is possible to answer? – jfox Aug 17 '17 at 06:04

2 Answers2

2

You should do this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
  $("img").addClass("example")
})
</script>
if you put your script in the head.

The $(function() {}) will wait till the document is loaded and call the function inside.

fresh mouse
  • 382
  • 1
  • 6
  • thanks but that does not work - again I see the full script in the page source but there is no effect on any img elements. I tried using other jquery commands like append and also no effect. I tried putting the code injection into the footer again no effect. – Chris Aug 15 '17 at 03:15
  • I think the problem is the you load jquery wrong. You should load it with https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js. You should only use //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js when you use a server. – fresh mouse Aug 15 '17 at 03:19
1

In Squarespace, when your custom Javascript doesn't seem to have any effect, or only works after a page refresh, it may have to do with Squarespace's AJAX loading:

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581

Note that this only applies to certain templates. Without stating the template you are using nor including a link to the site/page in question, one can only guess.

Brandon
  • 3,572
  • 2
  • 12
  • 27