Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'javascript'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 248 results

  1. hi everyone.. working on a fundraising site for covid-19 relief.. trying to embed a contribution form via code block but the height is limited, forcing one to scroll to see full form... I also tried putting the code into a squarespace embed block. I tried putting entire embed code i was give, including script, into a squarespace code block. I tried putting entire embed code i was given, including script, into a squarespace embed block. I tried injecting script into site-wide head as well as page specific head. I identified block ID and tried CSS injection to change height of block. Nothing works. Anyway you can help? Thanks in advance!
  2. Site URL: https://fredfilms.com Hi, My website has a scrolling index/homepage with multiple 'blank' pages nested. I added a banner image to the top page with a text overlay and would like that banner image to randomly load each time someone visits the page. Any help would be greatly appreciated!
  3. Site URL: https://andreali.com/news-blog/2020/6/4/how-to-connect-your-squarespace-ecommerce-website-to-pinterest-verified-merchant-program The Pinterest platform recently announced the opportunity for creators and sellers to become verified merchants on their site. As a verified merchant, your Pinterest account would display within your profile page a checkmark, a’la Twitter’s verified badge. Additionally, your account would be able to post Shoppable Pins to the platform. Those are some great benefits (see here) to obtain from the Pinterest platform - so I worked with my team to create this guide for myself and others, sharing how we were able to achieve Verified Merchant status on Pinterest using my Squarespace eCommerce website. (One quick note - at the time of this writing, you must be a US based merchant to become Verified.) Because Squarespace is not as supported with Pinterest as Shopify (they provide an third-party app to handle all the technical integration to Pinterest) my team and I had to figure out our own way to make this happen. Details of our findings as well as the code snippets to copy and paste are all outlined in my blog post with the provided URL above.
  4. Site URL: https://www.homeofficeshop.com/ Hello there, to comply with GDPR we need to use our own cookie Banner. The Code and banner is provided by our 3rd party data privacy provider. <script id='BBCookieConsentRur' type='text/javascript' data-bbcid='a2b25d5b-e335-4937-acde-da663463e670' src='https://2badvice-cdn.azureedge.net/psf/js/bb-manager.js'></script> Now the big question ... where to put the code ideally? I've tried it through settings>code injection for the header: Problem with the header injection is, that the navigation bar disappeares. The banner itself is displayed, but there is no way to navigate our shop now. Injection in the footer: The banner is displayed, navigation works but ... the cookies are not blocked anymore. That's how I've set it up for now, but it is 100% not GDPR conform... Is there any other way to inject above shown code or how do I fix the navigation bar problem? Attached screenshot of header injection problem.
  5. Site URL: https://yourhpcoach.com/hp-blog Dear friends, I hope you are doing well. Can someone help me to create and inject a code to have a like and share button on each of my blogs?
  6. Site URL: https://orbitcoffee.squarespace.com/ Hi, On my site, the nav consists of "Beans, Roasters, About Us" and the cart which is not coupled with the nav. Just wanted to know if this was possible, I am trying to replace the "stock" cart icon and " other available cart icons offered by the template with my very own icon that I have a url to. I am using: Version 7.0-Brine family(Brine Timeplate) I have uploaded my custom icon/image into Design > Custom CSS > Manage Custom Files which gives me a url, lets say this is https://examplepic.png I have tried setting custom CSS but it does not work: .Header .Cart .Cart-label { background-image: "https://examplepic.png" } I was wondering if I could maybe perhaps use the "Inject Code" functionality and target the .Cart-label class or the appropriate class and replace with something like <img src="https://examplepic.png" /> Other documentation I have looked into: https://support.squarespace.com/hc/en-us/articles/212838128#toc-header https://insidethesquare.co/carticon Expectation: To be able to use my custom cart icon and still preserve the cart counter and all cart functionalities Please help if this is possible, or whether this is a limitation to this customizing this template. Thank you in advance!
  7. Site URL: https://sundogbread.com/preorder Hi! I purchased the universal filter and was hoping to get help on some simple formatting. How do I change the width of the filter block? How do I change the order of the categories and tags listed? They are currently in alphabetical order. I would like to change categories to "Monday, Wednesday, Friday" and tags to "bread, pastry, pantry goods".
  8. Site URL: https://www.crescentridgedairybar.com/products I have a div named .fixedelement with position: sticky; top: 0; on an index page Here is the code block code i'm using: <style> .fixedelement { position: sticky; top: 00px; width:100%; margin: 0px; background-color: white; padding: 5px; min-width: 300px; overflow: visible; position: -webkit-sticky; } </style> <div class="fixedelement"> <a href="#milk"><button style=" width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;overflow: visible; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; appearance: none; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px; align: center;"> <b>Milk </b> </button></a> <a href="#icecream"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal;overflow: visible; padding: 10px; min-width: 100px;margin-bottom: 10px;"> <b>Ice Cream </b> </button></a> <a href="#beefandpork"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; overflow: visible; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;"> <b>Beef & Pork </b> </button></a> <a href="#Novelties"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;overflow: visible; "> <b>Novelties </b> </button></a> </div>
  9. Hi, I am using this tutorial for toggle. https://www.spacetutorials.com/toggle-button-for-content Nothing happens when I switch between buttons i.e. "section 1" shows on page load and on clicking both buttons (section 2 should appear when the right button is clicked). Also I see a bottom scroll (left-right) now. How to fix and make toggle work?
  10. Site URL: https://roncosta.com Does anyone have any good css/javascript code to get the parallax effect on 7.1? The one I'm using used to work great but now the main header of pages are flickering when you're scrolling up/down using a web browser. This is the code injection I'm using right now: <script src="\[https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\](https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js)"></script> <script src="\[https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js\](https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js)"></script> <script> $('.has-background').attr('data-scrollax-parent', 'true'); $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }'); $.Scrollax(); </script> <style> .has-background {overflow: hidden;} </style>
  11. Site URL: https://www.afahlstrom.com/test-page Hello Squarespace-people! So, I've implemented a popup-feature on my homepage using Featherlight. Everything works except when I try to close the popup-window. I need to close it "twice" and it's really annoying! I've searched the whole internet for answers, but noone seem to have this kind of problem... Please help me! Code in my Header: <link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" /> Code in my Footer: <script src="//code.jquery.com/jquery-latest.js"></script> <script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> Code for the button that executes the feature: <div class="sqs-block button-block sqs-block-button" style="text-align:center; padding:0;"> <a href="#/" data-featherlight="#playerflowchart" class="sqs-block-button-element--medium sqs-block-button-element">View Player Flowchart</a> </div> <div style="display:none;"> <div id="playerflowchart" style="text-align:center;"> <img src="https://static1.squarespace.com/static/5e24379002411b772ec6e88d/t/5f4294baa4e40060b3c2359e/1598198977828/Player+Flowchart.png" alt="Player Flowchart" style="max-width:100%;" /> </div> </div>
  12. I have an index page where i want the parallax effect on all the pages inside of the index except one. I am trying to disable the parallax effect on one specific page inside. For better context I am looking to have a background image that is the width of the page and does not have the parallax scroll. I tried using css to use a background image instead but it does not work. An example of what I am trying to achieve attached.
  13. Site URL: https://www.brandingofficehours.com Hey, amazing people. I have a question that might be pushing the limits of Squarespace, so I'm hoping to get lucky here 🙂 I saw this post in an earlier Forum thread, but I don't think it's quite what I need? Maybe I'm wrong—please tell me if I am! Site pw: branding Mock "LeadBoxes" from LeadPages I'd like to add a Leadpages popup to on-click of buttons in Image Cards. Like on my blog, here (white box, text that reads "Free Survey Tool: Stop Guessing..."). I have the Javascript code from Leadpages, but for a button designed by them: <script src="https://embed.lpcontent.net/leadboxes/current/embed.js" async defer></script> <a href="" data-leadbox-popup="2M4HPLXiWwLAuThfhXRuWm" data-leadbox-domain="brandistanley636.lpages.co">Click here to subscribe</a> What I'd like to happen is the user clicks the button in MY Image Card (which reads "Get Them Now") and that java launches that pop-up. Calendly Similarly, I have some Image Stacks (Consulting page, two next two each other in white boxes, under How I Can Help"). I'd love to launch my Calendly scheduler as a pop-up. Only mentioning this because I'm figuring that, if I can sort out how to do the above, I can sort out how to do this on my own, as long as someone helps me know the Image Stack Button class I should use. I think this is the java I'd use from Calendly: <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script> <a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/brandingofficehours?primary_color=d2a143'});return false;">Schedule time with me</a> Edit, for clarity: I'd love to be able to add different java to individual blocks, so I can change what pops up, if necessary (both on Image Cards and Images Stacks. If that fails, being able to apply the same java to each set (one across all Image Cards and one across all Image Stacks might do.) Thanks, team! Any help would be SO appreciated!
  14. Hello, I want to use this code on my website's homepage. https://codepen.io/kseniacold/pen/QKNKow Not sure where to paste the various HTML, CSS & JS codes. Thanks for any help!
  15. Site URL: https://locolove.com/ I'm hoping to get this background effect on my site, but I'm unsure how. Any ideas? https://locolove.com/pages/about-us
  16. Site URL: https://www.meetwo.co.uk/impact-test I'm trying to add animated numbers to my site. When the page loads the numbers will automatically count up to a maximum over a specified duration. I've found a bit of code that has been mentioned elsewhere on the forum and that's working well (see code below). Now I would like to improve this by adding a comma separation in the numbers eg 23,500. Stack Overflow offer some methods for adding commas but I can't get any of them to work. Any help would be much appreciate. Thanks Main code <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).load(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="30000" data-desc="Young people">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="80000" data-desc="Problems">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="250000" data-desc="Solutions">0</div> </div>
  17. Site URL: https://teal-cymbals-sys6.squarespace.com/ Hey All, I am having an issue with the Heading and Paragraph fonts on my site misaligning. It's most obvious in the footer and in stock newsletter blocks, but it is an issue sitewide. I am on 7.1 and am using custom coding from Squaremuse (Osaka theme) but with my limited coding knowledge I'm not seeing anything in the CSS or Javascript that would explain the issue. I have looked in the Site Styles at fonts, spacing, etc and can't find any reason this would be happening. Any ideas? Before you ask, yes I have been in touch with Squaremuse's support team, but haven't heard anything back about this issue yet. The password to the site is: bananas
  18. Site URL: https://secondchanceagency.com/ Hubspot website grader says that java script libraries on the site are not up to date and need to be updated with security patch. What do I do to update this?
  19. I am code-injecting JavaScript/jQuery to build a smooth-scrolling, hash navigation for a fixed-top menu bar in Squarespace 7.1 (so no template). The scrolling works great on desktop; on mobile it works too, with one exception. The navigation tray stays visible on the screen after clicking a link. So the page scrolls behind the open menu and it must be closed to return to the site. This is confusing. The plan: close the nave menu with the smooth-scrolling script. Here are the steps used to make it disappear (including code for specificity). Remove the "header menu open" class from the page body. This re-hides the menu. $('body').removeClass("header--menu-open"); Remove the "x"-shaped styling from the hamburger menu, returning it to a "=" shape. $('.burger').removeClass("burger--active"); Remove the "hidden" HTML5 attribute on the <span> inside of the hamburger button's "open me" state (the "="). $('.js-header-burger-open-title.visually-hidden').removeAttr('hidden'); Add the "hidden" attribute to the hamburger button's "close me" state (the "x"). $('.js-header-burger-close-title.visually-hidden').prop('hidden', true); The problem: Everything appears as it should visually on the page, as well as the changes in the web-inspector when opening/closing the nav tray normally. But at this point the hamburger menu (in "=" state) requires an extra click to open the menu as it normally would. One click to trigger something(?) and a second to open the menu. It seems Squarespace does not recognize the added "hidden" attribute from step 4. Does anyone know why that is, or where to start looking? I have had trouble with odd AJAX calls during page reloads, perhaps that is a hint. As this is beyond my knowledge – especially of 7.1 – any advice, direction, or thoughts are appreciated.
  20. Site URL: https://bulldog-circle-xzyr.squarespace.com/locations I've got the page mostly how I want it, however I'm running into some hiccups. I'm not a coder by any means, and barely know CSS/HTML. I know enough to get my hands dirty. The problem I have is that when you view the page on mobile, and you scroll down enough to the Google map, it interrupts the user's ability to continue scrolling, rather it just moves the map around. Is there any way to allow people to keep scrolling and still interact with the locations on the map? Maybe use two fingers to navigate and zoom? I saw a piece of code somewhere that said you can maybe use this: var map = L.map('map', { dragging: !L.Browser.mobile, tap: !L.Browser.mobile }); But I'm not sure where or how to incorporate it, or if it would even work with what I have currently. Additionally, for bonus points, there is some padding occurring on the right side of the web page that I can't figure out how to get rid of. Any tips for that?
  21. I have a form that collects a few data fields, then has user press "Submit" button. I want to send this data to our backend server (I do not want to use any of the Storage options, as we want our server to take action after the submit). My solution was to add some javascript into the advanced --> POST-SUBMIT HTML area and do a POST to our server, which seems to get called fine when button is pressed: POST-SUBMIT HTML HTML to be rendered in addition to the Post-Submit Message. However, it seems there's no way for me to grab the actual form data entered by the user and send it as part of this POST message to our server. Is there a way to access the form data inside my javascript in the POST-SUBMIT HTML? Or is there another way to do this that I'm not thinking of? Thanks!
  22. Does anyone know how to add an error message after doing a validation on a Squarespace form? I saw an example that allows to do a validation on submit and disable the submit button, but I don't know how to add an error message to inform the user about the issue with the submission in case that there was an incorrect input. This is from where I got the idea: I want to do a validation on a text field and show a simple error message if the input doesn't pass the validation. @summitdigitaluk any ideas?
  23. Hi, I am using a custom HTML form to POST some data to the design my night booking system. This all works fine. When the form is sent we want to then redirect the user back to the squarespace site using: <script> DMN.val('return_url', 'https://www.our-url.co.uk/thank-you'); DMN.val('return_method', 'post'); </script> I get the following error: Uncaught ReferenceError: DMN is not defined I am told this is because"make sure that your webserver and application can accept POST requests from the designmynight.com domain (including any subdomains)" How do I go about doing this? many thanks
  24. Site URL: https://www.bayschooladmission.org/ We have a simple script that 100% needs to run on our site, and even when we aren't signed in/editing the site, the button isn't working. The button displays; when we are editing the site, we get a message about the embedded script and safe mode, etc. We added the script with a code block, and it works on our usual website. I think we are on Squarespace 7.1, as we just opened our account a few weeks ago, so we can't even get Developer Platform access. Do we need to use a code injection? Can anyone help us?? We spent a lot of time creating this new site, only to find out that this one really important element isn't working. Here are the scripts: <script src="https://mobi.visitdays.com/assets/snippet/assets/main.bundle.js" data-mobi-hide-default-button=""></script> </div> <div><button type="button" data-mobi-id="bayschoolsf-52324542U81">Register here for Virtual Open House: 10/4</button>
  • Create New...