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
  • Squarespace Forum Club Guidelines's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me



Found 153 results

  1. Site URL: https://flounder-guppy-w6a2.squarespace.com/config/settings/advanced Hello, I am building a website for a client and they use a custom booking system for their salon. The booking platform has a Javascript code that you can add to your site. I went ahead and added it to a code block and it wouldn't work. I was curious to see if the script was incorrect so I went into my advanced settings and tested it out in the head settings of "code injection" and it worked in the header. For some reason it won't work as a code block on my book now page though. Here is the code. <script type="text/javascript">daysmart_acc = "48b89c40-9b1b-4a16-a8ac-4a72a4da45dc"; daysmart_iframe_width = 1000; daysmart_iframe_height = 0; daysmart_website_root = "https://plugin.mysalononline.com"; load_in_iframe = "false"; </script><script type="text/javascript" src="https://plugin.mysalononline.com/Scripts/external/bookingplugin.js"></script> Can someone help me add this to a single page?
  2. 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.
  3. Site URL: https://arugula-eagle-pdp2.squarespace.com/ Hey everyone, i'm new to squarespace. I saw that it is possible to edit the source code of our page when we have the premium advanced feature. What I want to do is to add support of mondial relay ( a relay point service), so for that I would need to add with javascript some code based on the mondial relay api. How could I acces to this checkout page, I pulled from git my website but I do not understand how this works and where my pages are stored so that I can modify them. Thanks for your help !
  4. Site URL: http://gregorylassale.com Hi, I've been trying forever to figure out how to add animated / clickable scroll down arrows on my site. I found this page https://codepen.io/nxworld/pen/OyRrGy I like the arrow in section 5. Through trial and error, I managed to remove the code that didn't seem necessary for me and I tweaked the ID and class tag a bit. Would it work on my site? If so, do I put the HTML in a code block? Does the CSS go in Custom CSS and the javascript in the Code Injection header? The HTML <section id="arrow" class="scroll"> <a href="#services"><span></span>Scroll</a> </section> The CSS .scroll a { position: absolute; bottom: 20px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: black; font : normal 400 20px/1 'montserrat', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } .scroll a:hover { opacity: .5; } #arrow a { padding-top: 70px; } #arrow a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid black; border-bottom: 1px solid black; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } The JS: <script> $(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); }); }); </script> Thanks in advance for any help.
  5. Site URL: https://bumblebee-koala-rze5.squarespace.com/ I have an another internal site. If I add any data on the site then I should be able to add the blog on squarespace site as well. For this, When a data/blog is added on my site, I'll call a REST API of squarespace site to add the blog. Is there any way we can do that? Are any such APIs available to add blogs? Hoping for quick response. Thanks.
  6. Hi, I am trying to add an "Appfolio vacancy listing widget" into my new Squarespace page that is currently being built. I copy and pasted the HTML provided by Appfolio into a "code" block. And it says "Script Disabled." If I try pasting it into just a normal content block, nothing happens. Any ideas??? Here is the javascript code: <script type='text/javascript' charset='utf-8'> document.write(unescape("%3Cscript src='" + (('https:' == document.location.protocol) ? 'https:' : 'http:') + "//prp.appfolio.com/javascripts/listing.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type='text/javascript' charset='utf-8'> Appfolio.Listing({ hostUrl: 'prp.appfolio.com', //propertyGroup: 'My Group Name', themeColor: '#676767', height: '500px', width: '100%', defaultOrder: 'date_posted' }); </script>
  7. Site URL: https://turbot-blenny-xfm4.squarespace.com/fund I have added some code into a codeblock which includes javascript. It is the second row of icons on this page. It works when I put the site in "Safe Mode" while editing, but when I check it in incognito mode it doesn't work. Has anyone come across this before? I would really appreciate some help.
  8. I'd like to diable the announment bar javascrip on mobile to increase the loading speed. I know how to do it with css (display:none). But it does not stop the script acutally.
  9. Site URL: https://www.americangardenhouse.com/products/o-sweet-viola I'm trying to create an a conditional form (in this case it would be on the additional product form). After selecting the product variants and then clicking "Add to Cart" the popup product form displays with two radio inputs. If "Yes" is selected, I want the additional product form fields to display (currently hidden CSS) and if "No" then an html message to appear prompting the customer to click the product form "Add to Cart" button. <style> #textarea-yui_3_17_2_1_1585523845981_190824, #address-yui_3_17_2_1_1585523845981_456969, #email-yui_3_17_2_1_1585523845981_459960, #phone-yui_3_17_2_1_1585523845981_461162 { display: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('#radio-yui_3_17_2_1_1585593158170_218442 input:radio').click(function() { selection = $(this).val(); if (selection == 'Yes') { $('.form-item').show; } else if (selection == 'No') { $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"'); } }); </script> The CSS is loaded using code injector into the page header and the script is in the footer. AJAX is currently disabled. Problem is, the click event is not working. Any help would be greatly appreciated. Thank you!
  10. 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!
  11. We're currently developing a site for a client and some custom features have been requested which are not satisfied by the built-in blocks. We're perfectly fine with writing our own code however we cannot find any sort of documentation on the API used to pull content from the CDN or really do anything outside of Commerce stuff. We find it hard to believe that not a single other developer has run into these issues. We also don't understand why these APIs are not public and if they are, why they seem so hard to find. From what we've read, custom blocks are simply not possible at this time and while plugins are available, the platform seems closed as we can't find any sort of application, sign-up, or anything on it. The main issue right now is pulling images from a gallery via some API for use in a custom code block. If anyone has any information that might prove useful, we would appreciate it.
  12. Site URL: https://bananastand.store/shop Having a problem with a container created via Windows 10. Could someone help assist with apply Css for windows specific? The container ratio seems to be working fine via Android, Iphone, Mac. Not sure about Desktop via Windows. Not sure if there is a specific responsive css code? .drawer-nav { z-index: 999999; width: 18.65rem; } .drawer--right .drawer-nav { right: -21.25rem; } .drawer--right.drawer-open .drawer-hamburger { right: 18.25rem; } .drawer.drawer--right button.drawer-toggle { display: none; } .drawer.drawer--right.drawer-close button.drawer-toggle { display: none; } .drawer.drawer--right.drawer-open button.drawer-toggle { display: block; } @media only screen and (max-width: 1500px) { .drawer--right.drawer-open .drawer-hamburger { right: 0.25rem; }
  13. Site URL: https://helix-lion-2h32.squarespace.com/config So I'm attempting to use the results of a button to query into another page. However, when I insert a code block into my page to create a drop-down button, I am unsure how to store the results of what the user chooses. Can anyone give me any ideas on how to approach this?
  14. There are several approaches to realize a multilingual site in Squarespace.All of the existing solutions have drawbacks. In the answer, you will find a solution for localization of squarespace sites without drawbacks. 1) Official Squarespace Solution Does not work on all templates. Structural limitation - you only have one navigation level left perlanguage. Language selector menu not very nice. 2) Using multiple squarespace sites with language subdomains You have to pay the Squarespace fee per language3) Using external localization services like localize.js oder bablic.com You have to pay for external services. There are additional resources that have to be downloaded Does SEO work well on these solutions? Did not investigate this. 4) Javascript based on CSS Selectors and page IDs Unflexible when adding pages, JS has to be adapted and grows
  15. Hi all,I'm new here, I would like to add a breaking news holizontal scrolling ticker, like CNN or BBC on top of my homepage, somebody of you know how to do it on squarespace? Thank youRiccardo
  16. Site URL: http://www.importantnotimportant.com Hi everyone — dealing with what seems like a small but very annoying issue with a code block in my sidebar. It’s a third-party email signup box and it’s on the sidebar on every page of my site. Unfortunately, the code shows up/works in every page except one, and I cannot for the life of me figure out why. It’s the same exact code, in the same exact place, on every page. (I already tried to turn off Ajax but that doesn’t look like an option for my template.) Any help would be hugely appreciated. Thank you. Quinn ImportantNotImportant.com
  17. Has anybody had any experience with adding their own validation to a Squarespace form? Essentially stopping the normal submission process, checking some custom validation, then continuing as normal/stopping the submission if there was an invalid entry? I have a client that needs some number fields to be submitted within a specific range and a few other variations on this theme. I'm hoping to find a simple solution, but I'm also happy to go with a very complicated one 😆 @michaeleparkour Do any of your plugins do this, or perhaps this is something you have come up against?
  18. Site URL: https://jeboahmiranda.ca/in-her-blazer Hello, I have been trying to use the following code in my page where I want my podcast to show as a code block: <a class="spreaker-player" href="https://www.spreaker.com/show/in-whose-blazer-episode-1-by-jeboah-miranda" data-resource="show_id=4265883" data-width="100%" data-height="350px" data-theme="dark" data-playlist="show" data-playlist-continuous="false" data-autoplay="true" data-live-autoplay="false" data-chapters-image="true" data-episode-image-position="right" data-hide-logo="false" data-hide-likes="false" data-hide-comments="false" data-hide-sharing="false" data-hide-download="true">Listen to "#1: In Whose Blazer?" on Spreaker.</a> and this one in my header settings: <script async src="https://widget.spreaker.com/widgets.js"></script> to embed Spreaker into my website to display all my podcasts but it has not been working. I can only see the actual code come up on my page, not what it's supposed to turn into (the final product where consumers can listen to the podcast episodes on my website). Contacted your live chat people first to help solve this but they sent me to you.. Please help!
  19. Site URL: https://www.brianspoem.com Hello! I currently have a script running in the sidebar that counts the number of poems. It works, but the only problem is that I have to increment it manually. I asked a programmer friend if he could help me with a script that would count the number of poems from a starting date so that I would not have to manually edit the script each day. Below is the code he sent me. Unfortunately, I can't get this script to run and he is not able to help me. This script is very much like the script currently running, so I'm not sure what the problem is. Any insight or suggestions are greatly appreciated. 🙂 Brian ===================SCRIPT BELOW=================== <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), startDate = getDaysSinceStartDate($this.attr('data-startdate')); $({ countNum: $this.text() }).animate({ countNum: startDate }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); }); a = 1; } function getDaysSinceStartDate(startDate) { var today = new Date().getTime() / 1000; startDate = Date.parse(startDate) / 1000; return Math.floor((today - startDate) / 60 / 60 / 24); }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-startdate="07/22/2016" data-desc="Poems Published">0</div> </div>
  20. Site URL: https://codepen.io/sarahwfox/pen/pNrYGb Hey all! I was wondering if it was possible to add custom cursors like this (see URL) to my website? I see some tutorials online for single images, but would something like this work as well? I haven’t done any JaavScript code injection into this squarespace website yet, and would be thankful for any tips and help! Thanks for your time!
  21. Site URL: http://www.strongmamawellnessco.com I'm having trouble adding Javascript or HTML code in the Squarespace code block. The code is from Convertkit (for a form I've created). I'm able to find the proper place to add the code, but it shows up as plain text on my site, instead of the form. Help!
  22. Hey guys, I found the following article - https://css-tricks.com/website-escape/ and was wondering how I can add such a feature to my site, I do not know anything about code. Using the Brine template. Any help provided would be greatly appreciated!
  23. Site URL: https://www.piipers.com/ Site URL: https://tarantula-soybean-yx3d.squarespace.com/ HI! I´m new to this so excuse my lack of knowledge in this. But I´m trying to understand how to translate the language in the circled areas in the shop. Anyone have an easy code I can use? Or some tips on how to learn. Need to translate some more things on the page 🙂 Thank you for any help!
  24. I'm working on implementing a third party solution for ratings and reviews (deliberately omitting the name) that's JavaScript based. I've found how to add code blocks, easy enough. However, what I'm struggling to find is if there is an easy way to pull in a value from my products, such as, name, description, image/thumbnail url, etc. I would like to pass these into the JS I'm adding. At a bare minimum, I need to pull in an id value. I realize I could manually change these values for each page, but that seems like it would be difficult to maintain in the long term. My hope is I can add some type of short code into the JS where these values are needed, allowing to me copy and paste the same code into each page to dynamically pull in these values. Thanks for your help. I'm just starting out, so I appreciate your understanding if my terminology is slightly off.
  25. Site URL: https://www.newmonday-sprint.de/medienplanung Hi everyone, in this page you will see a GetResponse form embedded in Squarespace. The weird thing happening is that any image on the page is not visible anymore and I can´t understand why. The only visible images are the ones used as background. I have tried changing image format, position, creating a different section... nothing seems to work. Ideas? thanks!
  • Create New...