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

Search the Community

Showing results for tags 'javascript'.

  • 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
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://disc-tangerine-2xzy.squarespace.com/ Hi all, In March I was approached by a potential client who sold cakes via a Squarespace website and wanted to set up a means for customers to schedule to pick up their orders. I did a ton of research and figured out code which embedded a scheduling iframe on the cart page only (huge shout outs to @codeandtonic, @creedon, @paul2009 and others whose answers on various Squarespace Forum helped me work out the code). Everything worked perfectly until 2 days ago when the scheduling iframe suddenly disappeared. I've gone in and I think the reason for it disappearing was Squarespace's 'New Client Scheduling Page' activating, but I've reverted it back to the original and I still can't work out how to get the iframe back. My final working code was: <!---jquery---> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!---acuity---> <script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script> <!---START scheduling WORKING---> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', init); window.addEventListener('mercury:load', init); function init(){ jQuery.noConflict()(function ($) { window.Squarespace.onInitialize(Y, function(){ // cart page condition if(window.location.pathname.startsWith("/cart")){ // acuity iframe var acuityIframe = '<div id="spacer-before-acuity"></div><h3 class="cart-title">CHOOSE PICKUP TIME</h3><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763"title="Pick Up Order" width="100%" height=540" frameBorder="0"></iframe>'; // iframe after cart container $(acuityIframe).insertAfter(".cart-container"); } window.onload=init; }); }); } </script> <!---END scheduling WORKING---> I'm quite lost on what to do now. Firefox is currently sometimes showing the iframe, but not reliably, and it took ages to work out the right code without disabling Ajax previously. If anyone has any insight, it would be so appreciated! Thank you! Password: hello
  2. Hi, Is it possible to add this type of animation, that when you hover the text appears animated and also the image zooms? example: https://luxcapital.com/companies/ Thank you!!
  3. Please see Row Column Finder. From the read me. It is quite easy to get into a situation where blocks are not behaving the way you think they should. Some of those issues are a how you think they should work versus how they actually work. But one issue that is really hard to tell is nested blocks which are virtually undetectable visually. The following image shows two similar looking page sections. The target layout is a row with three evenly spaced columns of text. Although they appear to be similar visually. They are not structurally. With the Row Column Finder bookmarklet you begin to have a chance at detecting layout issues that may be making your blocks behave in unexpected ways or are difficult to work with using CSS or JavaScript. In the first page section we see the target layout as desired. The second page section does not meet our target layout. We have a row with two columns. The first row first column contains a row with two columns. Undesirable nesting! What is a bookmarket? Wikipedia has a nice entry on bookmarklet.
  4. I am trying to get a simple javascript array to pass to a squarespace page, but everything I have tried has not worked. Here is the latest code I attempted. I put the script in the Advanced code section for the page, and the HTML in a code section on the page. I can't get anything to display. I am using squarespace 7.1. Any help would be greatly appreciated. Thanks! in advanced code section... <script> var array = ['apple','ball']; document.getElementById('content').innerHTML = array.toString(); </script> in code section on page <div id="content"></div>
  5. It can be a challenge to get CSS going to customize a blog post page. The following cited code adds the categories and tags of a post as classes to a selector you choose (body or article would be a typical choice). Please see Blog Post Categories and Tags Add.
  6. Hi, Does anyone knows how to create a crossfade animation for two images? for example, i have to images, one of top of the other one and i need them to be like back and forth, like changing that 1 second one image is on top and the other second the second image is on top. I dont know i explained myself, if not please let me know so i can be more specific! Also, does anyone knows how i can create this slider effect to a gallery images? https://abdomohamed.com/ the one in the "boharat" section. Heres a video! Thank you in advanced!! Grabación de pantalla 2022-05-19 a la(s) 19.35.14.mov
  7. It can be a challenge to get CSS going to customize a blog category page. The following cited code adds the category as an attribute to the body tag. Please see Blog Category Page Category Attribute Add.
  8. Site URL: http://musicwithmichal.squarespace.com/cats-and-dogs I am trying to hide the audio bar section and then using jQuery make it appear and play when you click "Play Song". This is my code: <script> $("div.play").click(function(){ $("section[data-section-id="627ad5fa2e230d27b113ece9"]").css('display','block'); }); </script> I would also like it to start playing the song when that div.play is clicked. Can someone please help?
  9. Hello! I have created a Code Block on a page of my website so I can insert a survey (from the website forms.app). The code provided by the forms website is: <iframe id="" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://my.forms.app/form/61a320417d2e520c5456fd3b" frameborder="0" style="width: 1px; min-width:100%; height:500px; border:none;"></iframe> At the end of it, users should be redirected to a Thank You page (also on my site) but it doesn't work, even though the form does say the user will be redirected. The page doesn't change and the survey goes back to its 1st page. I imagine it's because the Redirect-upon-Completion is in the form's settings (i.e. in a block inside the page) rather than in the page settings itself? Or maybe it's something else entirely. Any help appreciated! (Note: I'm a smart guy but also a complete beginner at coding so I can only make use of detailed instructions when coding is involved.) Thanks!
  10. Site URL: https://alligator-pike-e9e8.squarespace.com/reg-form-page-from-blank Hello 🙂 At the bottom of my form (see link) there are 3 checkboxes. I want all 3 boxes to be checked by default. The users would then have to uncheck the options they don't want, but none are required. How can I do this? If possible I'd like to make this change specific to this form or this page (in case I need to have other forms in the future without checked being the default). Thanks for any help you can give!
  11. Hey all - I think I'm close to being able to figure out what I need to do, just need to be pushed in the right direction: I'm looking to trigger a webhook (hosted by integromat) on a page load of my site (1 specific page not all the pages) and pass some of the query parameters of the URL to the webhook to then use in my database (done through integromat) I'm guessing I need to run a script to do this and put this in the custom code section of that page, but I'm not entirely sure what the script would be. Any suggestions here? Thanks!
  12. Site URL: https://pigeon-eagle-lfzb.squarespace.com/store-1/p/style-01-hs2wj-rec4m-3dpak Password = 123 Hi, When I try to change the value set in a select element using jQuery the value does not display on the screen, the selected attribute is added in HTML and when clicking on the dropdown the correct value is highlighted. This is what displays: This is what I am expecting: The correct value is highlighted when clicking on the dropdown: I have the following code which is not working on the Squarespace site: <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> $(document).ready(function() { $('select[data-variant-option-name=Color] option[value=Purple]').attr('selected', 'selected'); }); </script> I've copied the except HTML and jQuery into jsfiddle and it seems to work there: http://jsfiddle.net/qaft4ve0/1/ I have also tried using .val and .props but this does not fix it. Updates: I have since tried adding a dropdown box on the home page and this works correctly so there must be something on the product page which is causing the issue. I have a few more updates on this (Still not working): Ive manaaged to get the dropbown box to visually update by setting the data-text attribute: $("div.variant-select-wrapper.color-wrapper").attr("data-text", "white"); Looking at the HTML code I have noticed the following: data-unselected-options="["Color","Size"]" This does not change when using jQuery, it only changes when I manually click on a dropdown box and select it. There is also a new attribute data-selected-variant that gets added when both colour and size are selected: data-selected-variant="{"attributes":{"Size":"M","Color":"White"},"optionValues":[ {"optionName":"Size","value":"M"},{"optionName":"Color","value":"White"}], "id":"ae248023-a7b2-4ebb-89ef-55764797f7e1","sku":"SQ2275958","price":4000, "salePrice":0,"priceMoney":{"currency":"GBP","value":"40.00"}, "salePriceMoney":{"currency":"GBP","value":"0.00"},"onSale":false,"unlimited":true, "qtyInStock":0,"width":0,"height":0,"weight":0,"imageIds":[],"images":[],"len":0}" and also: data-variant-in-stock="true"
  13. Hi all, I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total. I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it. Any suggestions that might iron out the bugs here would be appreciated. <script> document.addEventListener('DOMContentLoaded', function() { var images = [ 'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg' ].sort( () => .5 - Math.random() ); var randImage = images[0]; document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage; document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", ""); }); </script>
  14. Please see Calendar Block Link Replace With Excerpt Link.
  15. 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!
  16. Install Revolut Merchant Payment Gateway Integration on Squarespace I understand that currently Squarespace may not support PHP files, which I would argue may or may not be a bottleneck here. I am mainly posting all the following to explore whether this task can be deemed as impossible from the very beginning. Does Revolut Merchant Payment Gateway require PHP server side language control on a higher level than what is available in SQS Developer mode? Is Squarespace Developer mode really so limited, that no work around exists for installing this merchant API? I use Squarespace version 7.0 and the Bryant template I understand that PHP is a server side language and that Squarespace core template languages are HTML, CSS, javaScript and JSON. REQUIRED TASK My business must collect fixed amounts, say for instance €100, €200 and €300. So we may need 3 widgets on 3 different pages. However, the most important thing is that we can put this payment widget on a page that collects fixed amount payments. ➤ SAMPLE Please access our sample https://business.revolut.com/payment-link/qKcakpYeOySJkSgqw4dHkg I envision that our Widget would be designed to look like this sample. It was created using the Revolut's payment link function. We cannot use this function normally because it requires manual steps for each transaction including login etc. Fields include: - Card number - Cardholders name - Email address ➤ Revolut's API payment overview https://revolut-engineering.github.io/api-docs/accept-payments/#overview ➤ Merchant API (1.0) Documentation https://developer.revolut.com/api-reference/merchant/#section/Authentication https://developer.revolut.com/api-reference/merchant/#tag/Orders https://developer.revolut.com/api-reference/merchant/#tag/Customers ➤ INSTALL THE WIDGET - https://developer.revolut.com/docs/revolut-checkout-js/#install-the-widget
  17. Hi everyone, I bought a plugin from Squarestud.io and it appears that they dont respond to anyone's emails/facebook/instagram - I assume they have gone bust. Anyway, I need to tweak the plugin and I am not very good at .js and would appreciate some help. The plugin is a logo loading screen using the site's logo. I am wanting to replace the image source (the existing site logo) with a gif that is stored in the site's CSS stored files - URL below. Any help is really really really appreciated. Thank you, Rob working site: https://pepper-clarinet-ctnt.squarespace.com/ GIF: https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif Code Injection: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <script> $(function() { var loadLogo = $('header').find('img').attr('src'); $('.logoload').css('background-image', 'url(' + loadLogo + ')'); }); </script> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script>
  18. Site URL: http://www.troutcreekwildernesslodge.com I have a commerce account that should allow for Javascript integration into my website but it seems to still not be working. I've generated the code from Lodgify to embed into my accommodations pages; I'll leave it up on this page and the code here. If someone could help explain what I'm doing wrong I would really appreciate it. Thanks, Ian Page is here: https://www.troutcreekwildernesslodge.com/caretakers-cottage <script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.60.6/renderPortableSearchBar.js"></script><div><div id="lodgify-search-bar" data-website-id="350282" data-language-code="en" data-search-page-url="https://troutcreekwildernesslodge.lodgify.com/en/all-properties" 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: #1b7542; --lodgify-ui-action-darker-color: #165e35; --lodgify-ui-action-lighter-color: #a4c8b3; --lodgify-ui-action-contrast-color: #ffffff; } </style> </div>
  19. Hello, I am in developer mode and made a very simple change to test, I properly pushed and after everything loads I get "fatal: the remote end hung up unexpectedly" then after it says everything is up to date. I see no changes made in my original site. What does this mean and why can't I see my changes? Thanks!
  20. Site URL: https://poweronwithlimbloss.org/discover-conference/#register-here Hello! I am new to the forum. I offer site support to a nonprofit. We created a custom form for an event sign-up in the user's CRM Keap and it turns out that it's not visible in certain browsers or browsing modes. Has anyone encountered this before or have a solution? I feel like I am being hot potatoed with support and the event is 2 weeks away. Thanks!
  21. Site URL: https://bluebird-kangaroo-dwz5.squarespace.com/tasting-rooms Hello! I have a Snazzy Maps with a Google API that I've embedded in a Code Block here. (password: Cows) Snazzy Maps has a new plugin here that is meant to populate a dialogue box with every marker on the map. For some reason, I can't get these to sync. Are they just incompatible? Do I need to insert code into a different area? Help me pleaseeeee. Thanks in advance!
  22. Site URL: https://www.bowermagic.co.uk/ How can I adjust the timing of the appearance animation of some specific text? There are two lines of text which appear in succession using the default fade in animation. I'm looking to have the second line wait for a few seconds before appearing, although they're both overlaying the same picture. Is this possible?
  23. Hi everyone, right now I'm working on a scroll down effect that is supposed to trigger an SVG image. I run my code in a HTML file and it works perfectly but when I do it in my SquareSpace site it doesn't work at all. All i get is my image in the middle of my screen, doing nothing at all. Here is my JS code in HTML: <body> <div> <svg width="285" height="277" viewBox="0 0 285 277" fill="none"> <path d="M283.5 138.5C283.5 214.123 220.413 275.5 142.5 275.5C64.5873 275.5 1.5 214.123 1.5 138.5C1.5 62.877 64.5873 1.5 142.5 1.5C220.413 1.5 283.5 62.877 283.5 138.5Z" stroke="#FF0000" stroke-width="3"/> </svg> </div> <script> let path = document.querySelector('path') let pathLength = path.getTotalLength() path.style.strokeDasharray = pathLength + ' ' + pathLength; path.style.strokeDashoffset = pathLength; window.addEventListener('scroll', () => { var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var drawLength = pathLength * scrollPercentage; path.style.strokeDashoffset = pathLength - drawLength; } ) </script> </body> This code works, so what am I doing wrong in squarespace ?
  24. 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.
  25. Please see Elements Replace. This is a base effect and gives you the ability to replace one selector with another. You might use it for an effect like moving a common block from the footer to particular pages.
  • Create New...