Where do I add JavaScript?

Where do I insert JavaScript while on Squarespace, or do I have to do this via another method?

I know where to insert HTML (Code Block) and CSS (Code Insertion et al). I am at a loss for where to insert JavaScript.

Please help a neo-coding individual. Thank you.

This depends on the JavaScript being used, but usually it goes in the head, Adding custom HTML, CSS, and JavaScript.

Sometimes it needs to be in the body instead (in a Code block).

What are you looking to do?

If you use a Code Block, be aware. In the Edit Code dialog, in the upper right, is a drop-down list with five choices, the first three of which are CSS, HTML and JavaScript. Somewhat confusingly, the CSS and JavaScript options are used solely to display the code to your visitor. No executable code can go in them.

All executable code goes in the HTML option. Enter CSS code wrapped in <style></style> tags. Enter JavaScript code wrapped in <script></script> tags. Enter HTML code directly.

If you use a Code Block, be aware. In the Edit Code dialog, in the upper right, is a drop-down list with five choices, the first three of which are CSS, HTML and JavaScript. Somewhat confusingly, the CSS and JavaScript options are used solely to display the code to your visitor. No executable code can go in them.

All executable code goes in the HTML option. Enter CSS code wrapped in <style></style> tags. Enter JavaScript code wrapped in <script></script> tags. Enter HTML code directly.

Thank you!

What is the difference between these sections: Code Injection, Header/Footer, Code Block and Custom CSS?

The difference between Code Injection, Header/Footer, Code Block and Custom CSS can be explained as follows.

An HTML web page has two overarching parts to it. First is the Head (not to be confuse with a Header -- more about that later), Second is the Body. The Body is where all the HTML code that actually structures the page and provides the content goes. In the Head goes some special code such as the site Title, the character-set specification, some CSS code (most CSS code goes in a CSS style sheet which is a separate document), and things such as metadata and Javascript code.

Code Injection is SQSP's method of allowing you to insert custom code into the Head (and a couple of other places as well).

Within the Body, at the top and bottom, there is a Header and a Footer. These appear on every page of the site and contain information that you want to appear at the top and bottom of every page. For example, in the Footer you might put a Contact button, some social links, and your address and email address. You might also put some particular nav buttons that you want at the bottom of every page, not main nav but some few special nav buttons.

A Code Block is a block, like a text block, that you place at a particular point on a page. It contains HTML code for something you want to do at that point. The code is local to the page.

For example, see my site (www.familyhistoryconferencenwa.org at the bottom of the home page. There are two links, one jumps to the Registration page, the other pops up an email message with pre-filled Subject and Message Content and puts the cursor in the To field. These two links are Code Blocks and the HTML code that does these things is in the blocks.

CSS code is code that styles the HTML code. It affects the appearance of the content on the page. HTML puts the content on the page; CSS governs how it appears. This includes things such as font size and color, background color and images, how a link behaves on hover, etc.

The custom CSS editor is the means that SQSP provides for you to enter custom CSS code that you design to alter the way the Template is styled.

I hope this helps.

li a href="http://www.contentchecked.com/allergy/" span class="____________"/span h3 class="cbp-ig-title">ContentChecked/h3 span class="cbp-ig-category">Food allergies or intolerances?/span /a /li

Thank you. What is the correct image format for the blank (underscore) area in my span class portion?

li a href="http://www.contentchecked.com/allergy/" span class="____________"/span h3 class="cbp-ig-title">ContentChecked/h3 span class="cbp-ig-category">Food allergies or intolerances?/span /a /li

Thank you. What is the correct image format for the blank (underscore) area in my span class portion?

I don't know what it is you're trying to do here but the code is not valid. There are a lot of mistakes and I can't help you correct it in the abstract.

What are you trying to do? You will have to give me the url to your site.

I am unable to write the code in its proper form, overtime that I do it is erased when I publish my comment. I would like to write it out proper, how do I do this?

My site is www.contentchecked.com, but the pages under construction are offline. So the point is mute.

I am unable to write the code in its proper form, overtime that I do it is erased when I publish my comment. I would like to write it out proper, how do I do this?

My site is www.contentchecked.com, but the pages under construction are offline. So the point is mute.

And how do I target a specific image in CSS?

And how do I target a specific image in CSS?

And how do I target a specific image in CSS?

And how do I target a specific image in CSS?

You can send me the url direct to the page even if it's not enabled (offline). That would be: www.contectchecked.com/urlSlugToThePage

The url slug to the page is found in the Configure Page dialog (same place you check or uncheck Enable).

If you send me the this url I will be able to visit that one specific page.

Can you describe what it is that you want the code to do?

Which image on the page do you want to target and what do you want to do to/with it?

Excellent. Thank you.

For enquiry number one: https://contentchecked.squarespace.com/config#/pages|/welcome1 The landing portion to alter the image button overlays, so that it is not a box.

For enquiry number two: https://contentchecked.squarespace.com/config#/pages|/allergyThe button social icons. To alter opacity when hovering.

Excellent. Thank you.

For enquiry number one: https://contentchecked.squarespace.com/config#/pages|/welcome1 The landing portion to alter the image button overlays, so that it is not a box.

For enquiry number two: https://contentchecked.squarespace.com/config#/pages|/allergyThe button social icons. To alter opacity when hovering.

Excellent. Thank you.

For enquiry number one: https://contentchecked.squarespace.com/config#/pages|/welcome1 The landing portion to alter the image button overlays, so that it is not a box.

For enquiry number two: https://contentchecked.squarespace.com/config#/pages|/allergyThe button social icons. To alter opacity when hovering.

Excellent. Thank you.

For enquiry number one: https://contentchecked.squarespace.com/config#/pages|/welcome1 The landing portion to alter the image button overlays, so that it is not a box.

For enquiry number two: https://contentchecked.squarespace.com/config#/pages|/allergyThe button social icons. To alter opacity when hovering.

OK. First, the URLs you gave me for your pages are not quite correct. For the second enquiry (the Allergy page) it should read

http://contentchecked.squarespace.com/allergy

and for the first enquiry (the welcome page) it should read

http://contentchecked.squarespace.com/welcome

For the second enquiry, in custom CSS enter

#footer nav.sqs-svg-icon--list a:hover {opacity: 0.6 !important;}

Try it first without !important but if it doesn't work put !important back in.

Change the opacity value up (max 1.0) to make it more opaque, down (min 0.0) to make it more transparent.

If this doesn't do what you want, leave the CSS code in place and enter a comment back here telling me what's wrong. I'll visit your page and see what's happening.

More on the first enquiry later.

I edited the code to correct it.

The url you gave me for the first enquiry is in incorrect format. It should be in the format: "http://contentchecked.squarespace.com/urlSlug" (without the quotes).

You can find the urlSlug in the Configure Page dialog. Copy and paste it in place of urlSlug above.

You can get to the Configure Page dialog by moving your cursor over a page until the Page Content | Edit | Settings bar pops up, just as if you were going to edit the page. But click on Settings instead of Edit.

Once I have the correct url, I can visit the page and see what you are talking about.

http://www.contentchecked.com/allergy/

https://contentchecked.squarespace.com/welcome1I hope that this one works.

The code did not work. I placed it in the the Custom CSS and wrapped it in

Sorry it took so long to get back to you.

For Enquiry 2: Put the code only in custom CSS. (Do not wrap it in 'style' tags.) Take it out of Code Injection.

I gave you code to work on the social links in the footer. I checked and it works.

I see now that you also want it for the large social icons on the page. Try this in custom CSS

img.thumb-image:hover { opacity: 0.6 !important; }

If that doesn't do what you want, leave the code in custom CSS and let me know. I'll check it and get back to you.

For Enquiry 1: The url you gave me takes me to an error message: "page not found." The url should look like this:

www.contentchecked.com/urlSlug

You can find the urlSlug for the page by selecting the page you want in MAIN NAVIGATION and clicking on the gear icon on the right. In the Configure Page dialog you will see, midway down, an item labeled URL slug. Type that, without the leading / (slash), in place of urlSlug in the url above.