Search the Community

I'm trying to use Ezoic for my ads, and one of the obstacles I'm running into is adding categories to my blog posts. I have them set up in Squarespace, but Ezoic is looking for them as meta data. Specifically, they are looking for the data is this format: <meta name="category" content="Food"> I would prefer not to manually add this line to every page, so I was wondering if it is possible (and how) to use a JS script to generate this meta data based on the Squarespace category. To add a little more complexity, I use multiple categories, but only one is relevant for this, so I'd also like to be able to add a conditional statement to return only the correct category. I would appreciate it if someone could point me in the right direction.

Hi, Can somebody help me with a js code? I need to send information about promotion codes to third parts from my website. So I need a code like these, but for promotion code information. Or do you know a place, where I can find help?

Im using turn.js in an iframe to host ebooks on my site but its not loading the book on iOS or bluestacks when i look at the mobile version. Any insight would be greatly appreciated. Thanks.

I'm not sure what's going on with this site I manage for a client: https://www.birminghamearlyyearsnetworks.org/ I didn't build it, but I took over content management and have been trying to clean up some of the code. (I'm not hugely experienced in this area, I'm ok with CSS but not with JS). A few weird things have happened, and I'm not sure if they're related. First, the client said today they started receiving a lot of spam attempts at newsletter sign-ups (and emails from Squarespace – "Mailchimp didn't save your recent Form Block submission". I set up Google reCaptcha this evening, thinking that might help. I'm not sure if it had, but since then, the home page is all messed up when you're logged in. It's fine online, thankfully, but none of the pages are editable. I'm freaking out slightly, I can't think what on earth I've done that would cause this. All I did was add the API keys?! Edited to add - weirdly, I've just noticed that when the CSS panel is open, it's editable and looks fine? Any help is hugely appreciated.

Hello, I have created an age limit in html css js and I would like to know where to put it so that it works. Thanks for all answer 😃

Site URL: https://seahorse-star-zkf7.squarespace.com/ Hello, Does anyone know how I can change the error messages on forms when it encounters an error? I'm trying to change the wording on the error message that pops up.

<script> let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); for (i= 0; i < imgs.length; i++) { alert("Hi!"); i++; } </script> <style>/* section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img { display: none !important;*/</style> This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible.

Does anyone know how to change the button text "Post Comment..." on blog commenting? I'm working with 7.1 for this particular site. I believe this has to be done via JS based on instructions I've seen for changing "Read More" text, etc. Thanks in advance!

Site URL: https://blackcatdesign.co.th/ https://pagespeed.web.dev/report?url=https%3A%2F%2Fblackcatdesign.co.th%2F

Site URL: https://jordandixon.co Here my site: https://jordandixon.co The issue is on mobile. I'd like to lock the screen orientation to portrait. If you turn your phone sideways on my current mobile site it looks bad. Any tips on how to do this with Javascript? I know there is an API for this but I'm unsure how to integrate it within Squarespace. I would appreciate any insight at all if anyone has come up with a similar solution. Thanks in advance!

Site URL: https://steven.squarespace.com/home-2 The WebGL background that I'm using lets you adjust the size of floating shapes. I currently have it set to 20. Is it possible to change the size, for example, to 10 for mobile only using CSS? Any help would be greatly appreciated. Thanks.

Site URL: https://darganssb.com/ I'm making a new site for https://darganssb.com/. I'm trying to recreate the function of the "Open menu to order here" button. I was given this code: <span class="glf-button" data-glf-cuid="afa6fa14-ba69-41f2-9ad4-98b8404861f3" data-glf-ruid="90cec304-907d-42a9-9588-a1fb747e36d5"> See MENU & Order</span> <script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async></script> But I don't know what to do with it. Can anyone help me out? Thanks in advance

Hello, I need to target the main logo within the membership area only (a membership specific class I would imagine), in order to change the link out within the member area only with JS (it currently links out of this area and users get confused). However I cannot find a specific class on the body or anywhere that specifies that someone is currently logged in. Does anyone know of anyway to achieve this? What might be different when a user is logged in that I can target? Thanks

Site URL: https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/ Hey guys! I have tried to follow the code on this attached website to make this marquee scrolling animation on codepen (https://codepen.io/madihasyed/pen/qBxBqGr) But I am not able to view the CSS elements properly, and I'm a complete newbie to Javascript so I have no idea how to import or attach the JS files to this code. Please let me know if there is something to be done from my side in order to achieve this effect! Thanks a TON ❤️

Site URL: https://dtmg.io Is there a way to add an onclick function to a button's href code? I've been googling and can't find anything. Thank you!

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site: 1. "Making Stagger Reveal Animations for Text": https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 2. "Ideas for Distorted Link Effects on Menus": https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html 3. "Animated Custom Cursor Effects": https://tympanus.net/Development/AnimatedCustomCursor/index3.html 4. "Text Distortion Effects using Blotter.js": https://tympanus.net/Development/TextDistortionEffects/index.html It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me. One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. Is he correct? Is there a solution? Thanks for looking. Adam

Site URL: https://taranaomi.com/home Hi! Looking to understand and figure out how to code Locomotive scroll. I want my "Works" page to scroll through my portfolio pieces. The project titles will be links to external pages I have set up already. Here's what I'm hoping for: https://mathieulevesque.com/en Here's a couple of resources I've found online: https://codesandbox.io/s/b0c5t?file=/src/App.js:1092-1100 https://locomotivemtl.github.io/locomotive-scroll/ I've looked at YouTube resources and tried to play around with inspect element to see if I could figure it out but nothings worked so far. My site URL is taranaomi.com - any help would be appreciated, even just setting up the overlapping type and images. Thanks!

Site URL: https://codepen.io/dagerzuga/pen/KLOaqL Hi, was hoping to get some assistance formatting the shared CodePen reference to be used within a code block. Want to use it as header text for a page section area. Thank you in advance.

Hey all, I'm trying to get a script that would create a random image generator. A button on top, image display on the bottom. Ideally, the image would come from a Flickr gallery or a SS gallery that I create so I don't have to enter each address to an image in script. This one works great, but doesn't pull from a gallery. https://codepen.io/jsd041313/pen/RQEOWm Any ideas?

Site URL: https://www.wroteon.com/tester I am trying to inject the code from this article into my own site using a code block. In trying to combine the codes into one and change it to h3 text, I tried the below code, which give the result you can currently see with the dark grey background (please ignore the typewriter effect on the text in the lower section as that is a different approach I am wanting to avoid using): <h3 id="check"> I am <span id="typewriter"></span> </h3> <script> let data = ["Text1", "Text2","Text3","Text4"]; let len = 0; let speed=150; for (let i = 0; i < data.length; ++i) len += 2*data[i].length; len += 4*data.length; function type() { let p=0; for (let i = 0; i < data.length; ++i) { let x = 0; while (x <= data[i].length) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) ++x,++p; } --x,p+=2; while (x >= 0) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) --x,++p; } } setTimeout(() => { type(); }, len * speed); } function blinkingPointer(){ setTimeout(()=>{ document.getElementById('check').style.borderRightColor=`red`; },500) setTimeout(()=>{ document.getElementById('check').style.borderRightColor='transparent' },1000) setTimeout(()=>{ blinkingPointer(); },1000) } blinkingPointer(); type(); #check{ margin:2px auto; width: fit-content; border-right: 1px solid; } </script> I have a feeling this has more to do with how I am injecting the code rather than the code itself. Thanks for any help you can give!

Hey, How do we change the animation effects on different elements, I have site wide animation but I want different animations for different blocks or sections. For example, having one block slide in from the right, and another block from the left, then the section after doing a fade up. Thanks!

Site URL: https://sascha-simon-software.squarespace.com/ Hello, I am a total beginner when it comes to css/html etc. I have a very simple homepage and I want to include this header: https://finisher.co/lab/header/ is this possible? Can I use custom header/footer code injection? I have a Personal Plan, but I am willing to update to a Business plan if this is possible. Regards, Sascha

Site URL: https://cpsfarmtoschool.com/ Our client requires that we use a third-party (OneTrust) for their cookie banner. After installing OneTrust code in the header, the banner displays correctly, however, we see several alerts in the dev console. Anyone know how to remedy these issues?

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css. My first step worked: With code injection I can add a class .preFade to my block: window.onload = function myFunction() { var element = document.getElementById("block-85f05db57d57001f69ee"); element.classList.add("preFade"); } My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible: const appear = document.querySelector('.preFade'); const cb = function(entries){ entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('fadeIn'); }else{ entry.target.classList.remove('fadeIn'); } }); } const io = new IntersectionObserver(cb); io.observe(appear); My JS skills are pretty poor, so any help is greatly appreciated.

Hi! I was wondering how to hide the close button on the promotional pop-up, and instead have the pop-up fadeout after 5 seconds? Thanks!