Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
ContentChecked

Where do I add JavaScript?

Question

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.

Edited by rhyann

www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post

Recommended Posts

  • 0

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.


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 1

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.

Edited by alxfyv

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 3

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.

Edited by alxfyv

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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?

Edited by ContentChecked

www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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?


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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.


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
  • 0

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.

Edited by alxfyv
correct code

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

I edited the code to correct it.


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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.


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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.


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...