Search the Community

Site URL: http://overdrive.rocks After browsing the forum for a solution to autoplay the header carousel on our site (https://www.overdrive.rocks/), I added the custom script below. This worked, however, I want to now turn off the nav arrows and if I disable them, the autoplay stops working. How can I get the banner to autoplay AND remove the nav arrows? Thanks! <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $( ( ) => { /* auto click user items list arrow right Version : 0.1d0 SS Version : 7.1 Dependancies : jQuery Note : this effect is not active in SS Preview to test it use private browsing < https://bit.ly/3f6lhq2 >. By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const clickIntervalSeconds = 6; const dataSectionIds = [ /* to limit the effect to certain page sections, enter data section ids for each page section. the format of each line is a data section id following is an example line. copy the example line below and paste after the example line. remove '// ' at beginning of pasted line. repeat for as many data sections ids as needed */ // '[enter data section id here between single quotes]', ]; // do not change anything below, there be the borg here if ( window.frameElement !== null ) return; // bail if in Preview let selector = [ '.user-items-list-banner-slideshow__arrow-button--right', '.user-items-list-carousel__arrow-button--right', ]; // begin shotgun selector if ( ! dataSectionIds.length ) dataSectionIds.push ( '' ); selector = $.map ( selector, function ( s, i ) { if ( ! dataSectionIds.length ) dataSectionIds.push ( '' ); const a = $.map ( dataSectionIds, function ( d, i ) { if ( d ) d = '[data-section-id="' + d + '"] '; return d + s; } ) return a; } ) .join ( ', ' ); // end shotgun selector const $button = $( selector ); if ( ! $button.length ) return; // bail if no button const click = ( ) => { $button.click ( ); } setInterval ( click, clickIntervalSeconds * 1000 ); } ); </script>

I am trying to limit the qty a customer can order using the below script. The script is supposed to change the quantity input tag to have max="5", but it is not working. Is the issue with my code, or something to do with SquareSpace? I do know that the page loads with max="9999" by default, is there something I'm missing to override that? <script> var qty = document.querySelectorAll('input[type="number"]'); qty.setAttribute('max', '5'); </script>

Site URL: http://hcponline.squarespace.com I'm playing around with the features of events and calendar blocks. I have a set of courses (service products in my store page) that I'd like to display in a calendar by their start dates. If I create a bunch of events with the course start date, I can add a product block to the event detail page, but the extra data field doesn't show. It would be better to redirect people from the event detail to the product detail for that course. I've tried adding a code block set to JavaScript, and tried entering code several ways. None of them seems to be working. Here's the latest version of the code: <script>window.location.href="/browse-classes/p/photoshop-core-22-08-17";</script> I'm thinking ultimately I'll want to use .location.replace() instead. Any suggestions? The site is currently password protected, and I noticed something about scripts being disabled when you have to log when in preview. I don't think password protected is the same thing. Thanks!!

Site URL: https://www.rebelrebel.co.uk/bouquets Under local business: Postal address is not defined properly Missing telephone for some unknown reason Under type Organization: same for postal address Missing fields 'image' and 'name' which both count as errors Please can you help? (I could put the code in correctly but it doesn't get rid of this incorrect code...) many thanks

Site URL: https://www.ntsc.me/work https://www.ntsc.me/work Second Index: https://www.ntsc.me/index_2#/index_2_2/ Hello Friends. I'm hoping someone can help a bit here. I will be so thankfull!!! This is the FLATIRON GRID. I just need to change and (re/point) the link of one specific thumb/project (image/Title and view word link), to open a second index instead of open the relative project. With this script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('#grid .item a div.wrapper div.project-title h3').click(function() { window.location = "https://www.ntsc.me/index_2#/index_2_2/"; }); </script> The word “VIEW” in the rollover of the project thumb in the grid, is point already perfect to the second index, but have two bad things: —>1- Is just working in the word “VIEW” of the thumb ( need to work over all this thumb ans not just in the word view ) —>2- Is changing the links for the “VIEW” words from all the projects thumbs of the grid. ////// SO! I just need a bit of help with the script in order to make this link (re-pointing) happen, and be able to ( for very very Huge projects) use a dedicated index...., letting users arrive there from the principal index by a click over a MAIN inicial thumb. Thanks a lot!, for your smart help! LA

Site URL: http://politicsgirl.com Hello.. anyone. I am attempting to add this 'floating site badge' script to my page and I can't seem to get it working. It's merely an image with a link. I've tried adding the scrip to the 'Code Injection' (header and footer). I've tried adding the code as HTML to a code block on a page as well as head/footer. The image container appears to work but, only displays a sad pixel face (image attached). 😞 Any thoughts on where I am is stepping? Many thanks! -HW Here's the Script: <script src="https://d2tiekx4vc5w8q.cloudfront.net/Content/pv/sitebug.js" data-id="349072" data-pos="bottom-left" data-url="2022/social/social-video/news-politics" data-display-rank="0" id="webby-pv-bug"></script>

Hello All, I am trying to run a footer script to delete some elements from a Calendar block. For some reason querySelectorAll('item.item--ongoing') seems to be firing before the page fully loads even though I am checking for 'complete' ready state. When I run querySelectorAll in the browser console it picks them up so it's a loading issue. Is there a way to wait longer for the script to run? <script > (function () { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } document.addEventListener('readystatechange', event => { if (document.readyState === "complete") { init() } }); function init() { var monthlyEl = document.querySelectorAll('.item.item--ongoing'); console.log('item--ongoing',monthlyEl.length) new MutationObserver(function() { init(); // myFunction2(); , etc... }).observe(document.body, {attributes:true, attributeFilter:["class"]}); })(); </script>

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://supernatlparks.com I am building my first 7.1 site, and I used an Auto Layout list to organize content on my home page. Mostly, I like how this works: It seems like will make editing the page easier, and make it easier to keep the layout working between desktop and mobile, while using cards. However, I have realized that the images in an Auto Layout card aren't clickable, only the button. That's a pretty big problem for an e-commerce site. I want people to be able to get to the products as easily as possible. Does anyone have a solution for linking each image to a URL? (The same as the button would be nice, but manual is no problem.) I don't mind using CSS and/or scripts to accomplish this.

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>

Site URL: https://www.vatcllc.com/careers Good afternoon, We will be switching over to Greenhouse in the coming months and I need to figure out how to add their custom tag / scripts to our page. Our Careers page will direct them to the page with the job board. I have reached out to Squarespace support and they cannot assist with custom code modifications and pointed me to ask here - in this forum. There are two scripts that Greenhouse provides - the first is division identification tag for the application: <divid="grnhse_app"></div> The second is a script src attribute that identifies job board Javascript location: <scriptsrc="https://boards.greenhouse.io/embed/job_board/js?for=business"></script> I need to identify how to insert both of those scripts on our job board page via Squarespace. Any and all assistance is greatly appreciated. Thank you

Site URL: https://duhaime.ca Hello, The "slide" animation is not working properly in the footer of my site. Some elements remain hidden. It is as if the script did not correctly detect the position in the page. Since the bottom of the page never reaches the middle of the screen, the animation is never triggered. Can I turn off all animations in the footer? I'm talking about animations throughout the site, defined in the "Design / Site Styles / Animations" section of the admin UI. Thanks! Marc

Site URL: https://www.1stbreakaccounting.com.au/ Hi there, We are trying to embed a mailerlite form into the contact page on our site. The "script disabled" message appears and blocks the form from functioning. Does anyone else experience this issue and have any suggestions? The form appears perfectly, and has worked once in that a confirmation email is sent but it is only ever sent once and the subscriber doesn't make it to Mailerlite. Thanks in advance, Rachel

Site URL: https://www.buddybike.no/nettbutikk Hello Community, I hope someone can help me 🙂 I want to make a fixed text so I can scroll down the page and the text stay visible.

Site URL: https://www.whitefishlakecharters.com/booknow Hello! I have embedded some script for a calendar and booking module for Fareharbor on this client's site. What you are seeing below is the BOOK NOW page from navigating to it from the menu. Sometimes this calendar and booking module has a mind of it's own and is not visible on the actual website but I see it when I'm on the backend of SS. (See images below) HOWEVER! When I'm on the backend, it shows perfectly fine. See below. I've also noticed that these elements do not show on tablet or mobile 😞 . I have implemented this type of Fareharbor booking on other SS sites and it has worked like a dream. Not sure what I did wrong on this one. ANY help welcomed. THANK YOU!

Site URL: https://imagineinternet.net/signup I want to create a dynamic address lookup feature for my squarespace site! I can't figure this out...!!! I want the customer to be able to see if we provide service to their address. I like how the example provided autopopulates an address that they service in the dropdown: https://imagineinternet.net/signup If we don't provide it (to a database of addresses I can fill in in the backend), then I want them to be able to request service at their address. Would really appreciate any suggestions, thank you very much!

Site URL: https://khaki-gerbil-cdd4.squarespace.com/ pass:modern84 Hi, I'm using a GDPR compliant cookie banner from CookieYes. However it blocks all scripts if you decline cookies or before you allow them- this includes scripts that load images- this makes my web page unusable... I want to configure CookieYes in a way that it blocks just Squarespaces' analytical cookies (names: ss_cvr and ss_cvt). But to do this I need a path/adress of the script that loads these cookies. Anyone knows them? Or maybe theres an easier way to work around this issue? Thank you for any advice! edit: CookieYes answered this question directly: Squarespace loads cookies and images- everything- via one script. The only way to be GDPR compliant is disabling analytics- what a pity...

Site URL: https://www.signaturesmiles-nc.com/request-appointment-1 Hello! I'm trying to install the following widget code script but it's not working in the code block. The company's tech support says it's a plug and play solution and that they have lots of SQSP users but I can't seem to make it work. Any help would be much appreciated: <script src="https://d3ivs86j8l3a5r.cloudfront.net/flexBook.js"></script> initFlexBook('https://flexbook.me/sigsmiles')

Site URL: https://sparrowstartup.com/ CONTEXT: I've been using https://pagespeed.web.dev/ to find ways to speed up my website. There's been multiple Javascript files which are unused (according to that site). Removing them will speed up load times on mobile/desktop for my website: https://sparrowstartup.com/ If you run my website on that testing site, it'll tell you some scripts should be removed, as shown in the picture attached. Doing so, would help my website load faster on mobile and desktop. THE ASK: (1) Can you please recommend how I can do so? My current score is low, I want to be above 70. Any honest, detailed tips would be very much appreciated. (2) Based on the report from that site, Is there anything else other than removing javascript, that can help me speed up the website? CC: @tuanphan @bangank36 @creedon | THANK YOU!

Site URL: https://hardsuitlabs.squarespace.com/careers-ges-testing I'm on a sandbox page for my companies homepage, trying to enable a function that links a script to our own page. The script I added is a VERY basic HTML "hey, look over here" addition: <div id="grnhse_app"></div> <script src="https://boards.greenhouse.io/embed/job_board/js?for=hardsuitlabs"></script> Working with the support team at greenhouse, I was told that there is nothing in their script that could cause this. I checked with them to make extra certain this would be an issue on my page. There is no added padding in the edited page itself, there everything shows as tightly and neat as I would want it to. The above code should contain nothing that explains the odd behaviour the page has: When looking at the edit area, the spacing between the job forms and the rest of the page isn't only extremely large - it grows as you scroll up and down. I seem unable to track down this huge blank space and the way that the blank space just grows as you scroll through the page is a mystery to me. We have no CSS code added to the site at any place that touches the margins. I have checked the padding options in Spacing and Site Margin following this link. Sadly, all I could do with that page was confirm that nobody had made changes to the site's basic configuration. At this point, I feel a bit at a loss. The bahviour of growing blankspace was observed by me on the latest versions of Edge, Firefox, and Chrome. Very grateful for any pointers on why this happens or even indeed on how I can force it to stop.

Site URL: https://www.iamcatterina.com Hi All, WEBSITE: iamcatterina.com PASSWORD: catterina I'm building my client's website and have had a couple troubleshooting issues: When loading the page, there's a "jump" glitch. Where the website loads small and jumps to the actual website size. It only occurs when first loading the page. Or clicking the navigation logo. Here's a screen recording to show the issue. Another issue is the scrolling feature. I've added anchor jump points to the navigation. However, I noticed that it's not working on Safari/mobile. My client really wants this feature to be streamlined on all platforms, so please let me know if there's a work around this. I've tried solving the issue by checking the coding I've added. But I noticed that even when I remove all of the coding, the loading glitch still occurs. Any help would be WONDERFUL! I've attached the coding additions as well if that helps at all:

Site URL: https://www.trickofthelight.co.nz/shows/lysanders-aunty I am using the Squarestudio Content Accordion plugin for a site: http://demo.squarestud.io/content-accordion Sadly they are not responding to my help requests. My clients site is having an issue where if one accordion is open then you click on another it scrolls to the bottom of the page rather than closing the open one and moving to the correct position. The page is here: https://www.trickofthelight.co.nz/shows/lysanders-aunty If you scroll to the bottom and then open the 'Credits' accordion then the media accordion you will see what I mean. Any help would be appreciated as my client would love to have this one solved. Source code is below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ init(); //Start the code when the page loads }) function init(){ $('.sqs-block-markdown').nextUntil('.sqs-block-markdown, .sqs-block-code').slideUp(); //Your code (wrapped in a function) $('.sqs-block-markdown').unbind().click(function(){ $('.sqs-block-markdown').not(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideUp(), $('.sqs-block-markdown').not(this).removeClass('activedrop'), $(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideToggle(); $(this).toggleClass('activedrop') }); $('.sqs-block-markdown').css('cursor','pointer');; } document.addEventListener('pageChange', function(){ //When the change page event fires due to ajax init(); //Call the code again }); /*This stuff listens for an ajax page change*/ window.onload = watch; function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})} </script> <style> .sqs-block-markdown { border-bottom: solid 1px #ddd; cursor:pointer; } .sqs-block-markdown .sqs-block-content:before { content: "+"; float: right; font-size: 150%; line-height: 120%; color: #aaa; font-weight: 100; } .activedrop .sqs-block-content:before { content: "-" !important; float: right; font-size: 150%; line-height: 100%; color: #aaa; font-weight: 100; } </style>

here is the code <!--Begin CTCT Archive--> <script id="archiveScript" src="//static.ctctcdn.com/js/archive-static/current/archive-static.min.js"></script><div id="archiveList" data-archive-count="100" data-m="a07e27mhho60"></div> <!--End CTCT Archive-->

Site URL: https://www.halepule.com/blog Hi everyone, I'd like add a "Print Recipe" button to the top of all of my blog posts. I know I can go in individually and create those buttons but I'd like to have the script to apply it in the code injection of the blog page itself. I tried one I found here on the forum but it did not work. Thanks for your help!

Site URL: https://www.xystema.com/pricing Below is my code for replacing the text on the product-price. It works smoothly with non-subscription product while on the subscription product it works only on the ready function but when on selecting the variant it is not reading. <!-- change the text "every 12 months" to "billed annually" in the price --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); </script> Here's the screenshots of the one that is working. The "Billed annually" changed the "Every 12 months" that is default of the template. Here's now the other screenshot that is not working. You may want to check my website for more details: https://www.xystema.com/pricing password: 030774