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



Found 195 results

  1. I'm trying to add this Back to Top Button with Scroll Progress Indicator to my site. https://www.jqueryscript.net/other/back-top-scroll-indicator.html I'm adding the code into code injection (footer), but I can't get it to work. I'm probably missing something. This is what I have done: <div class="progress-wrap"> <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /> </svg> </div> <style> .progress-wrap { position: fixed; right: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .progress-wrap::after { position: absolute; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; color: #ecedf3; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; opacity: 0; background-image: linear-gradient(298deg, #da2c4d, #f8ab37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::before { opacity: 1; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: #ecedf3; stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } </style> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script> <script> var progressPath = document.querySelector('.progress-wrap path'); var pathLength = progressPath.getTotalLength(); progressPath.style.transition = progressPath.style.WebkitTransition = 'none'; progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; progressPath.style.strokeDashoffset = pathLength; progressPath.getBoundingClientRect(); progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear'; var up<a href="https://www.jqueryscript.net/time-clock/">date</a>Progress = function () { var scroll = $(window).scrollTop(); var height = $(document).height() - $(window).height(); var progress = pathLength - scroll * pathLength / height; progressPath.style.strokeDashoffset = progress; }; updateProgress(); $(window).scroll(updateProgress); var offset = 50; var duration = 550; jQuery(window).on('scroll', function () { if (jQuery(this).scrollTop() > offset) { jQuery('.progress-wrap').addClass('active-progress'); } else { jQuery('.progress-wrap').removeClass('active-progress'); } }); jQuery('.progress-wrap').on('click', function (event) { event.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, duration); return false; }); </script>
  2. Site URL: https://www.rgsproductsinc.com/system?type=clvw I can't find anything online that describes this behavior. (Test URL included for your amusement.) This page is supposed to load in header text, a descriptive paragraph, a drawing, and a slideshow based on the value passed to the page in the URL. This all runs off JavaScript embedded in the same custom code block as the HTML/CSS. The HTML/CSS is working; the JavaScript only works when I'm logged in and previewing the page. We've tried multiple browsers and I've tried injecting it into the page header, but nothing changes. (Edit: the "Request a Quote" button is also supposed to launch an email with data on the system chosen; it's not doing anything outside the preview window.) Is this a SquareSpace thing or something else? We're using DNS redirect from the old site host to point to this one; would that cause this?
  3. Hello! (First Time Here) I'm running into issues with a javascript not loading in a code block for a video player I am trying to implement. The scripts work and load on a local implementation and on a non-squarespace hosted implementation. Here is the code in question: <meta charset="UTF-8"> <html> <head> <script src="https://www.mysite.xyz/vendome/js/jquery-3.1.0.min.js"></script> <script src="https://www.mysite.xyz/vendome/js/jquery.cookie.js"></script> <script src="https://www.mysite.xyz/vendome/webrtc.js"></script> </head> <body> <div class="div-section"> <table> <tr> <td><input type="hidden" id="sdpURL" size="50" value=""/></td></tr> <tr> <td><input type="hidden" id="applicationName" size="25" value=""/></td></tr> <tr> <td><input type="hidden" id="streamName" size="25" value=""/></td></tr> <tr> </table> </div> <div class="div-section"> <video id="remoteVideo" autoplay playsinline controls muted style="width:1000px;"></video> </div> <td><input type="button" id="buttonGo" onclick="start()" value="" /></td> <input type="button" id="buttonCheckStream" onclick="getAvailableStreams()" value="Get Available Streams" /> <script type="text/javascript"> pageReady(); </script> <div> <span id="sdpDataTag"></span> </div> </body> </html> jquery.cookie.js will not load causing the next scripts to not function. When you load the page we get "Uncaught TypeError: $.cookie is not a function". I'm fairly certain that the jquery scripts aren't loading twice and over writing eachother like other posts have suggested. I've tried renaming the the cookie.js as well but no luck. Could this have something to do with AJAX? Is there anything we could do to force the scripts to load? Any advice is appreciated! (Excuse the bad HTML, I'm from a python background.) EDIT: The template is AJAX compatible and the option is enabled.
  4. Site URL: https://www.progresscreative.com.au/ I'm having an issue with my site after adding a google review plugin towards the base of the home page. After adding the plugin, the site works well on desktop, but when viewing the site on a mobile device, the website menu is now off centre and there's movement on the whole site. Is there some coding I need to specify in the plugin code for the width? Here's the current plugin coding and some screenshots from mobile: <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-bf4b8d76-663c-45ef-87f5-081326fd84d6"></div>
  5. Hi team! I am just exploring Chrome Devtools for the first time to improve site performance. A couple of main things that have popped up are - eliminate render blocking resources - remove unused javascript/ CSS I am a newbie and can't find anything online on how to actually do this. Can anyone help? Point me to a guide somewhere? Would really appreciate it :) Thanks Sandra
  6. Hi, My question is about Sqaurespace website, Reactjs app deployed on Firebase how to connect it all. I have a sqauresace website + REACT based web app which takes event information from the user, the data is stored in Firebase and it is displayed . It's deployed on Firebase. It's like an event listing site. So this app has nodemailer, image-resize features. From SEO point of view my sqaurespace website and app are two independent entities. The event list which is the service is not adding benefit to the website. How can i solve this issue? I read that Squarespace doesn't support server side code and I need to do Setup endpoint/database to be accessible cross-domain via XMLHttpRequest (I need a little elaboration on how to execute it) Thanks for this post. But my REACT front end seems to be impossible to transport. Any suggestion please. Thank you
  7. Using this method to upload a Javascript file But then, when I try to reference it from the Squarespace site, I get a CORS error: Access to script at 'https://static1.squarespace.com/static/57014b5b746fb963478e3d4f/t/5d7ba83d4e25b616833d896b/1568385085375/runtime-es2015.js' (redirected from 'https://brooke-meek.squarespace.com/s/runtime-es2015.js') from origin 'https://brooke-meek.squarespace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Am I doing something wrong here?
  8. Site URL: https://emu-orange-ea7f.squarespace.com/impact I'm trying to create an animated number counter. I've found some code on this forum (see below). It's working fine on desktop but isn't loading on mobile. It appears to be correctly written for ajax so I'm at a loss as to why it isn't working. Can anyone help? <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).format({format:"#,###", locale:"uk"}); $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>
  9. Hey all, I am attempting to hard-code in a set of percentage rings using HTML, CSS, and Javascript (migrating from Wordpress, where this was just a plugin). This is the code I am trying to integrate: https://codyhouse.co/ds/components/info/circular-progress-bar I put the HTML inside a code block, and it shows up correctly. However, the CSS and Javascript do not seem to be working, despite the code editor not kicking back any errors, and it working outside of Squarespace. How can I add this code? Thanks, Hugo
  10. Site URL: https://www.freeformgroup.org/phoenix-rising-1 I have a markdown accordion on my site that only works after the page is reloaded. Is this an ajax problem? Here is the javascript I'm using that has worked fine on other sites: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script>
  11. Hi, Am using contact form on Squarespace. After form submission gets all values in a javascript file. Tried below ways: POST-SUBMIT REDIRECT -> http://rpadmanaban-dev.apptivo.net/create.js This field did not accept the script file Another Way: Code injection fields ->this script called the form reload functionality. I need after submission called the script file
  12. I would like to make a fetch request from my squarespace site to a weather data provider. The code works fine when I write it into a code block directly on the page. My issue is that the code contains an API key that I want to keep secure, yet accessible. My strategy to keep this "simple" was to use the method described in this article to upload my file that runs the script which uses the API key, and then reference that file using <script src="/s/javascriptfile.js"></script> The biggest question is whether storing an API key in an uploaded file linked on a disabled page and then referencing that file is a secure way to access the API key without showing it to the world. The next question is do I really need to wait overnight for the references to uploaded files to work? That is one of the problems noted in the same article. Thanks!
  13. Site URL: http://bostonbiketaxi.com When I attempt to write some code in a code block using JavaScript, the Display Source option grays out and prohibits me from checking/unchecking. So I am effectively prohibited from using JavaScript in a code block. The option to check/uncheck the Display Source box works as expected when HTML is selected, but not for JavaScript. What could be happening here?
  14. I'm trying to use a proven piece of code in my header code injection, however it doesn't work when I inject it into Squarespace because of the #. How can I get around this?
  15. Hello, I would like to add a sidebar to my website that displays my review score from customers (its from a Dutch e-commerce organization). Sadly, they do not provide a module for Squarespace so I will have to insert the code myself. I do not have any coding experience so I have no idea how to approach this. I have tried it with code injection but it did not show up. Could anyone help me? I am using the Brine theme. This is the code that is provided to me: <script> (function() { _webwinkelkeur_id = ; //_webwinkelkeur_sidebar = true; //_webwinkelkeur_sidebar_position = "left"; //_webwinkelkeur_sidebar_top = "300"; //_webwinkelkeur_mobile = "bottom"; //_webwinkelkeur_tooltip = true; //_webwinkelkeur_language = ; //_webwinkelkeur_language_other = false; var js = document.createElement('script'); js.type = 'text/javascript'; js.async = true; js.src = '//www.webwinkelkeur.nl/js/sidebar.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s); })(); </script> For webwinkelkeur_id I have to add my own personal code. Thanks so much!!
  16. I have markdown blocks on multiple pages that utilize dropdown sections upon selection. For example, you click a title and then all the text for that title drops down, click the title again and all the text closes up. However, every time I am going to the page, before the page is fully loaded (for 1s), you can see all the drop-down text displayed. The drop-down text then closes up and becomes hidden once the page is fully loaded. How to resolve this issue? i.e., how to ensure the drop-down text is hidden from the start? Below is the embedded script code on each page that utilizes these dropdown sections. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();}); }); </script>
  17. How can I make an arrow responsive to the text before and after the arrow. Looking at the attached image, the text is left justified and right justified and I would like the arrow in between to be a responsive width.
  18. Hey everybody, Trying to figure out a way to avoid a 3rd party form to include file upload. I injected HTML into the form, and it looks great. However, after submission, the data isn't included in the form storage locations (email and google drive). I assume the reason that doesn't work is because the form is given a unique id upon creation and that id is what is used to transmit data, making the JS injected AFTER the creation of the form invisible in the data transfer. Any ideas on how to get around this? Here's the code I've injected into the footer: <script> // If on order-form-page, inject file upload element if (document.URL.includes('/order-form-test')) { document.querySelector('#textarea-yui_3_17_2_1_1572443434525_3770').insertAdjacentHTML('afterend', '<h3>Please Upload Artwork Here</h3><input type="file" id="myFile"><br><br>'); document.querySelector("#myFile").setAttribute("accept", ".doc,.jpg,.png,.jpeg,.docx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"); }; </script>
  19. 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!
  20. Site URL: https://factory3.org/privacy-policy Hi there! I have added some JavaScript to my site in order to place a privacy policy on my page. It is a third party code from Termageddon. I can see the content only if I refresh my page. I'm thinking the site visitors won't know to do that. Upon first loading, the page appears to be blank.
  21. 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>
  22. I was trying to add a "Go To Cart" button below the default "Add To Cart" button. I was able to inject another element with jquery like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $("<a class='btn btn--border theme-btn--primary-inverse' href='/cart/'>Go to Cart</a>").insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script> But of course it doesn't get all the button styling. So I tried to add div parents to match other buttons on the site that look like this: <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1590159860790_33264"> <div class="sqs-block-content" id="yui_3_17_2_1_1591844141919_110"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1591844141919_109"> <a href="/cart" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Go To Cart</a> </div> </div> </div> However, when I was nesting the "a" element, all the divs and the element within disappear. This was because I was not consistent using ' and " to define my strings. The following code works for me. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="large"><a class="sqs-block-button-element--large sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script> Would still be interested in the best place for documentation for 7.1 site wide css styles. I guess everyone just rips it from what gets served on their site? Thank you, -Dean Fix for order swapping in mobile If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button. There's probably a better way to query for this and insert it, but it doesn't seem to change much. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button" style="-webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; -webkit-order:4; order:4;"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" style="margin: 0 auto !important; width: 70% !important"><a class="sqs-block-button-element--medium sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script>
  23. I have a few JavaScript files that I need to upload (such as jQuery Waypoints - among others). Where do these get uploaded?
  24. Hello I would like to create a split section and so one side sticks as I scroll, does anyone have any idea how to create this? Example: https://nayatraveler.squarespace.com/journeys-peru-walking Thank you
  25. 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>
  • Create New...