Search the Community

Has anyone added a smooth scrollbar to their website? I'm not meaning smooth scrolling to an anchor, I'm meaning the entire browser. I'll use the Fireart Studio's website as an example... https://fireart.studio Thanks in advance for your help!

Site URL: https://www.parkbrewing.company/ I have been using a custom script (https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1) for background image parallax, but recently it became buggy and started having lots of issues displaying correctly. I fought with it for a while and had some success, but finally decided to dump the script and revert back to the native square-space image effects. Our site mostly uses the tilt effect, but when I apply native image effects on background images, the image often flips horizontally (or vertically?) it displays upside down. What gives, why is this happening and what can I do? I just want to have slight parallax on background images to add some depth to our artwork. I've also noticed that the background images that are flipped (displaying upside down), travel or tilt in the opposite direction (or correct direction for proper parallax). I've tested on a couple of different devices and browsers and the issue isn't isolated to the editing browser. Can you change the native tilt direction of the image, assuming we can sort out these other issues first? Also the first image on this page https://www.parkbrewing.company/lineup is somehow cut off by a white box, I imagine its some type element style - overflow "hidden" issue or image card wrapper, but I can't resolve this.

This is a tricky one: I'm having trouble at mergebusiness.co (pw: thug) [business plan] with my header text -- I'm using a 'live' .typeit script and on mobile it runs the text back/forth onto the next line. I would love to add a mobile-only change to this code block to insert a <br> in the text to avoid that happening on mobile. However, since that's not super likely, I created a duplicate .typeit code block tweaked for mobile beneath it, and have tried to hide the desktop code on mobile, and vice-versa. BUT the .typeit second code does not work because it only runs one .typeit script on a single page, it seems. Even when the first .typeit code block is hidden, the second .typeit code block won't run. My solution to this is to try and swap the order of these blocks when viewing on mobile, so the mobile version of the code block takes priority. Can I swap these blocks completely when viewed on mobile? (Neither is hidden right now.) OR-- if you can help me run two .typeit code blocks on the same page simultaneously that would solve it. I can just hide one on desktop and mobile. Thanks to whoever can crack this one. Need to launch this website later this week, so help is appreciated. USING: ".mobile-typeit-container" and ".desktop-typeit-container"

Hey there! I'm currently finishing a website that was started by another user -- it hasn't been published yet. The site is mostly stock, built using one of Squarespace's templates. As far as I can tell, there is only one piece of embedded custom code which is for CanadaHelps' donation form. The code for the form is directly from CanadaHelps (and is currently working on our old website). Sometimes I can see the form in development and everything looks OK, other times I'll be working on the site and there will be an error message where the code is inserted. When I edit the page, there is an error that has replaced where the form is located that reads "Script Disabled". Does anyone have any tips on why this is happening. I am not a developer; I am volunteering to help this small non-profit launch their website. This is the code: <script id="ch_cdn_embed" type="text/javascript" data-page-id="41124" data-cfasync="false" data-formtype="0" src="https://www.canadahelps.org/services/wa/js/apps/donatenow/embed.min.js"></script> I checked the forum for similar posts and found something about viewing pages in incognito. I launched Squarespace incognito, but the error is still there when I edit the page. Many thanks for any suggestions! V

Site URL: https://www.anqi-wu.com/ hello! i'd like to add a scroll to top function on my website (placed on the bottom right hand side of the website). any help on coding for custom css to add this function to my website would be greatly appreciated! i'd like to use this icon for my scroll to top button: thank you!

Site URL: https://www.gorsecottage.co.uk/ Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!) When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it. Can't seem to find a workaround since it's an interference rather than a setting, can anyone help? The web page: https://www.gorsecottage.co.uk/ This is the code: <script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script> <div><div id="lodgify-search-bar" data-website-id="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true"> </div> <style type="text/css"> html { --lodgify-ui-action-color: #183f39; --lodgify-ui-action-darker-color: #13322e; --lodgify-ui-action-lighter-color: #a3b2b0; --lodgify-ui-action-contrast-color: #ffffff; } </style> </div>

Hi can anyone help Im trying to add a elfsight widget to my site for google reviews but when I add the code it says script disabled?

Site URL: https://www.night-manifesto.com/ PASSWORD : manifesto Hello, I have created a section with tabs - and a button so that when i click on it i display only one of the blocks of the section that is an embedded video player and this part works fine. Now what i'd like to do is to have medium sized section and when i click on the button the section would change its height to small so that it would match the video player's eight. And this for mobile too. So i've written this line of code to inject CSS with JQUERY $(aboutTabButton).click(function(){ $("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}) ; }); it doesn't work i've tried this other line and it doesn't work either if ($( "#galleryTab" ).hasClass('active-tab')) { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); else { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); } I have tried numeric value for the height too and it didn't work either. Here is the entire script : <script> $(function(){ let galleryTab = '#block-d378e56b7083e4d48c24'; let aboutTab = '#block-yui_3_17_2_1_1625405642353_6184'; let contactTab = '#block-yui_3_17_2_1_1625405642353_6708'; let codeTab = '#block-yui_3_17_2_1_1625406080854_3785'; let galleryTabButton = '#gallery-tab'; let aboutTabButton = '#about-tab'; let contactTabButton = '#contact-tab'; /*Initiate the Tabs*/ $(aboutTab).addClass('non-active-tab'); $(galleryTab).addClass('active-tab'); /*Add Actions to Each Button*/ $(galleryTabButton).click(function(){ $(galleryTab).addClass('active-tab').removeClass('non-active-tab'); $(aboutTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab'); }); $(aboutTabButton).click(function(){ $(aboutTab).addClass('active-tab').removeClass('non-active-tab'); $(galleryTab).add(contactTab).add(codeTab).addClass('non-active-tab').removeClass('active-tab'); }); /* $(aboutTabButton).click(function(){ $("#60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’ }) ; }); */ $(contactTabButton).click(function(){ $(contactTab).addClass('active-tab').removeClass('non-active-tab'); $(aboutTab).add(galleryTab).addClass('non-active-tab').removeClass('active-tab'); }); /* if ($( "#galleryTab" ).hasClass('active-tab')) { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘small’}); else { $("##60ca1b5eefaefb2ac9e03f81").css({ ‘height’: ‘medium’}); } */ }); </script> and i've also tried this in the CSS aboutTab.active-tab{ [data-section-id="60df82096aa9df24b6d23124"] { min-height: unset !important; ; } @media screen and (max-width:767px) { [data-section-id="abcxyz"] { min-height: unset !important; height: 250px !important; } } THIS IS FOR THE SECTION CALLED CHAPTER ONE FOR NOW BUT IT WILL BE APPLIED TO ALL CHAPTERS.

Site URL: https://www.touchofgingerrecipes.com/ I'm not sure if this is the right forum, but the reviews on the recipes on my website are not showing up on google search. I have attached a picture of what one of my recipes comes up like on google search. Mine is the first recipe pictured that says "no reviews." But, it does have a review (I use a powr plugin). Does anyone know how to fix this?

Some websites are set up so that if you copy some text from their site, it adds a link to their site when you paste it. Does anyone know a way to achieve this in Squarespace? For someone with little to no coding skills (ideally a simple script or code snippet they can add to their site customisation). NOTE: I am aware that it not possible to completely stop people copying content, so please do not explain how people can just take a screenshot etc. My objective is to add whatever deterrents I can even if it won't solve it completely. I found an article about a script called Copy-Magic-Paste but it's from 2015 so I can't tell how to use it with Squarespace.

Site URL: https://www.charliefollows.com Hello, I am trying to embed Vimeo videos onto a page but the script is disabled. Does anyone know how to fix this?

Hi, hope someone can help me out. I have a script with an icon which I want to embed on top of textblock. I want to use the <embed> function using this code: <script src="https://cdn.lordicon.com//libs/frhvbuzj/lord-icon-2.0.2.js"></script> <lord-icon src="https://cdn.lordicon.com//nocovwne.json" trigger="loop" colors="primary:#121331,secondary:#b4b4b4" style="width:50px;height:50px"> </lord-icon> How can I align this icon in the centre of the block? It is now aligned to the left. Thank you in advance

Hey everyone! I'm currently trying to add an HTML/JavaScript code block that allows a page to make API calls/HTTP requests. I've attached a simple HTML file screenshot with all the code I'm trying to add to the code block. This HTML file, when opened on chrome, successfully queries the API using JavaScript 'fetch' and receives a response which is added to a table and displayed in HTML. Unfortunately when copied on the Squarespace code block, I get a script disabled message on the editing page and then a fetch failed when viewing the page normally. Any help would be greatly appreciated, let me know if any further clarification is needed! Thank you!

Site URL: https://www.livewireradio.org/events/20200121 I'm trying to add scripted Eventbrite ticket sales buttons to our events and would like to style them the same as the buttons already on our site but can't figure out how to do it. I'm hoping I can either use a squarespace button and have it run the script below from Eventbrite, or format the button the Eventbrite code generates to the look the same as the others. Password for site: SSForum The first button is the standard squarespace button with a link. The second button is a scripted button using the code below from Eventbrite. We'd much prefer to use the scripted button that brings up a modal for ticket sales but want the style to match the first button on the page. Here is the code we have for the scripted button: Appreciate your help!

Site URL: https://harveys-furniture.com Greetings, Searching for a solution to embedding a script provided to me from a client working with Simpl.fi that tracks their Facebook Pixel. I have informed them that Squarespace can implement their Facebook Pixel however they prefer to use their pre-existing service. I have added the script to the <head> section within sitewide Code Injection but I cannot use the Chrome extension provided by FB to since it's obfuscated within the script. Is this the proper place to add the script and how can I be certain it's firing correctly, thanks all! <script async src='https://tag.simpli.fi/sifitag/04359640-b7e8-0138-31e5-06abc14c0bc6'></script>

Here's the problem scenario. We are holding an election for my organization. We cannot do it in person. I plan to create a form where people can vote for nine candidates maximum. I would like to know if it is possible to add a script to a form that counts the number of check boxes checked and kicks the form back when it exceeds nine boxes checked, directing voters with an error message that informs them of the voting error. I'm also looking for info on how to implement it. Thanks!

Site URL: http://prwomeninbusiness.squarespace.com Hi! Thanks for taking the time to read. I'm trying to imbed a countdown timer widget into my page. I've followed all the instructions and read a lot of forums to see why I'm getting a script disabled code. I am a complete novice at this so go gentle with me :) Here's what I've tried based on other forums: -Logging out, viewing the page from an incognito tab -Disabling Ajax, that doesn't apply because Ajax isn't used with 7.1 versions of squarespace -Triple checking I've copied the code correctly I've attached screen shots of it while I'm in editing mode and when I'm in visitor mode. As you can see in visitor mode, it's like nothing even exists. Here is a copy of the code I'm using: <center><h2 id="timer"></h2></center><script>var countDownDate = new Date("Jun 16, 2021 19:00:00").getTime();var x = setInterval(function() {var now = new Date().getTime();var distance = countDownDate - now;var days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);document.getElementById("timer").innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";if (distance < 0) {clearInterval(x);document.getElementById("timer").innerHTML = "Influential Women of the Year Awards - Live on Facebook!";} }, 1000); </script> What am I doing wrong?! How do I fix it?

Site URL: https://fccsaintpaul.org/newsletter I'm trying to find a way for script to appear on my site. I don't seem to have the ajax loading option to turn off. Any ideas?

Site URL: https://geckovacations.squarespace.com/ Password: 12345 on the Home Page there is some code for a property search widget. It doesn't show up when the site is live nor in edit mode in Squarespace 7.0 but works fine when I tested it on a 7.1 template. Attached is the error shown. Can anybody please tell me exactly what to do? I am not a coding expert.

Hello everyone, I hope you are all doing well, I'm encountering a peculiar issue with the Editor. I've inserted a code block with a few lines of jQuery that dynamically hide a couple of sections on my homepage. I've deliberately put this script in a code block and not as code injection, so that the Editor would disable it while I'm working on the site. But Squarespace inconveniently loads the script when I'm in the Editor instead of showing me the Safe Mode notification -_- Do you know how to prevent this from happening? Cheers, Marina ✨

Site URL: https://kirklandcapitalgroup.com/blog/kirkland-capital-group-approved-as-a-verivest-verified-sponsor I have a script to add a lead capture horizontal bar at the bottom of a page. This is generated from a lead magnet service, beacon.by. <script async src="https://beacon.by/leadcapture/embed/62782234ac9019d5"></script> I have it showing with success via the page header code injection on this normal page on my site. However, I have added the same script code to the Post Blog Item Code Injection and it does not show up on the blog post pages such as this one. Advice on this? Thanks!

Site URL: https://www.dazeddigital.com/beauty Hi! I've recently started discovering the options Squarespace offers for site customization, but was left without answers on this question. Is it possible to create a Floating/Scrolling Logo, like the one the Dazed Beauty site has? If so, how would you/should I go about it? I appreciate the answers!

Site URL: http://buffalobiketours.com Hoping to get some help here -- the images on my blog posts keep disappearing. Some background: I recently purchased a Squarepaste plug-in code for my site to create a timeline effect. It requires I place the images in a Quote block. It will work for a day or so but the images then disappear and display as broken links. See this example: https://www.buffalobiketours.com/black-history-buffalo/1 The timeline in halfway down the page. Any suggestions? I can share the code for the plugin if that helps. Thank you!!

Site URL: https://remitaniel.squarespace.com/ Hello! I am trying to add custom CSS and JavaScript to a page of my website. I am using the template Dario 7.1 (unable to turn off Ajax loading in the Design > Site styles). If I add a <script> tag into an HTML code block of my page, "Script disabled" appear in the Edit mode. On View mode, the script does nothing. If I add the script within a <script> tag into the site footer (Settings > Advanced > Code injection > Footer), the script content seems to not be executed, in Edit and View mode. If I add the script within a <script> tag into the page <head> (Page parameters > Advanced > Code injection), the script content seems to not be executed, in Edit and View mode.. With the CSS, if I add it within an HTML code block or in the the page <head>, it is displayed in the Edit mode, but some of it is ignored in View mode (the font mainly). Do you have any idea what I am doing wrong ?

In the Page Settings / Advanced for a single page, I'm trying to embed a form from JotForm and also turn off the menu bar at the top of the page. I can make one or the other work, but not both at the same time. How would I go about include a CSS <style> and javascript <script> so both work? Thanks....