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
  • 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: http://lavenderrightsproject.org/donate Howdy! I am trying to add a line of code to our donation website that was provided by Little Green Light. The iFrame version works just fine, but Java doesn't seem to be compatible at all. We have a business account, so in theory it should work, but no luck. It only keeps displaying line of code. The error appears to be centered around </script>, but I don't really understand why. Could somebody advise? Here is the code I am trying to embed: <script type="text/javascript" src="https://secure.lglforms.com/form_engine/s/P55eGc8aijBW_Fmx-LmCAw.js"></script><noscript><a href="https://secure.lglforms.com/form_engine/s/P55eGc8aijBW_Fmx-LmCAw">Fill out my LGL Form!</a><br/></noscript> Thank you! Amy
  2. Site URL: https://vinculum.ai/ I'm trying to figure out how to add particles on the left and right sides of a website like this: https://vinculum.ai/ Would someone be able to help me understand how to add code to the margins of a site and allow it to be responsive (like flexbox) so as the page increases/decreases, the particles on the side move back and forth? I'm not sure what to target the code injection for or how exactly to build this cool thing, but would love to give it a shot :) Any suggestions?
  3. Hey, has anyone used VantaJS successfully with SquareSpace 7.1? I saw an old thread but the solution provided in it does not appear to work anymore. This is what I've got in Code Injection so far. Just as a test I've also just changed the "el" property to something like "vanta" and then put in a Code Block with <div id="vanta"></div> just to see if the animation would display at all on the page, and that also gets me nothing. <script src="https://cdn.jsdelivr.net/npm/vanta/vendor/three.r95.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.17/dist/vanta.halo.min.js" <script> VANTA.NET({ el: ".section-background", <----maybe I'm just targeting the div wrong? But I've tried a million things. mouseControls: true, touchControls: true, gyroControls: false, minHeight: 200.00, minWidth: 200.00, scale: 1.00, scaleMobile: 1.00, color: 0xffffff, backgroundColor: 0x2bbbcf }) </script>
  4. Site URL: http://smifsc.com/survey-results Does anyone know if it’s possible to use the Google charts api to plot charts in a code block using stored excel (or other format) data in squarespace? im currently manually updating the charts and would like to better automate this.
  5. What’s up everyone, I was wondering if anyone in the community would know how to implement a “lazy load” or “Ajax load” so that images load when they’re appeared instead of right when the page loads. I think https://grovemade.com looks super cool, I think they’re using JavaScript to load a super small version of their images then adding a CSS blur so the perceived load time is a lot faster. Can this be done with a Squarespace template?
  6. Site URL: https://www.lisajonutrition.com/classes I created a custom button on the page above using the below code. The idea is that my mailerlite form shows when the button is clicked. On the back end, this works fine. But when I pull up the website on any other computer or device, the button doesn't work. What am I missing from the code? <div class="sqs-block button-block sqs-block-button"> <div align="center"> <a onclick="ml_webform_3970552('show')" class="sqs-block-button-element--large sqs-block-button-element" target="_blank">I'm ready to watch the class!</a> </div> </div>
  7. Site URL: https://www.kevinwalton.ca Hi there, Can someone help me add this to my site? I have tried but I don't know how to make it Squarespace accessible. Index HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Awesome Hover Effect + Animated Cursor | Codegrid</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="nav-wrapper"> <nav> <a href="#" class="hover-this"><span>Home</span></a> <a href="#" class="hover-this"><span>Our Story</span></a> <a href="#" class="hover-this"><span>Studio</span></a> <a href="#" class="hover-this"><span>Contact</span></a> <div class="cursor"></div> </nav> </div> <script> (function () { const link = document.querySelectorAll('nav > .hover-this'); const cursor = document.querySelector('.cursor'); const animateit = function (e) { const span = this.querySelector('span'); const { offsetX: x, offsetY: y } = e, { offsetWidth: width, offsetHeight: height } = this, move = 25, xMove = x / width * (move * 2) - move, yMove = y / height * (move * 2) - move; span.style.transform = `translate(${xMove}px, ${yMove}px)`; if (e.type === 'mouseleave') span.style.transform = ''; }; const editCursor = e => { const { clientX: x, clientY: y } = e; cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; }; link.forEach(b => b.addEventListener('mousemove', animateit)); link.forEach(b => b.addEventListener('mouseleave', animateit)); window.addEventListener('mousemove', editCursor); })(); </script> </body> </html> Style CSS html, body { margin: 0; padding: 0; cursor: none; } .nav-wrapper { width: 100%; height: 100vh; background: #161616; } nav { width: 100%; margin: 0 auto; text-align: center; position: absolute; top: 50%; } .hover-this { transition: all 0.3s ease; } span { display: inline-block; font-family: "Monument Extended"; font-weight: 300; color: #fff; font-size: 36px; text-transform: uppercase; pointer-events: none; transition: transform 0.1s linear; } .cursor { pointer-events: none; position: fixed; padding: 0.3rem; background-color: #fff; border-radius: 50%; mix-blend-mode: difference; transition: transform 0.3s ease; } .hover-this:hover ~ .cursor { transform: translate(-50%, -50%) scale(8); } @media(min-width: 900px) { nav { display: flex; justify-content: space-around; } } @media(max-width: 900px) { nav { top: 30%; } .hover-this { width: 100%; padding: 20px 0; display: inline-block; } }
  8. Site URL: https://raspberry-coyote-6gss.squarespace.com/config/design Hi there, I have received some external Javascript from the client which I have added in via a code block on my site. On desktop view it is fine but when on mobile view it doesn't resize to fit. I was wondering how can I get it to resize? Do I need to ask for more code from the client or is this something I can do myself?
  9. Site URL: https://sponge-lychee-awaf.squarespace.com password is "1" I was wondering if someone can help me install Page transitions to my site? I don't know how to do it with Javascript. Here is a link of the code that I want to install. https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ I am mainly looking at the "DIFFERENT EASING" page transitions. Thanks again! - Kevin W
  10. Hey everyone, i'd like to remove an <a> element from my site, there's no id which makes it impossible for me to figure out! Here's the element's code: <a target="\_top" rel="noreferrer noopener" href="SimpleURL" class="css-11cewt9" style="display: flex !important; position: static !important; height: auto !important; opacity: 1 !important; color: rgb(51, 51, 51) !important; font-size: 16px !important; align-items: center !important; text-transform: uppercase !important; font-weight: 400 !important;"><img src="SimpleURL" width="16px" alt="" style="margin-right: 5px;">Text</a> Thanks in advance!
  11. Site URL: https://contrabass-paddlefish-w396.squarespace.com/ Hey squarespace fam, I've got a video set up to autoplay on hover and have added command copy "hover to play". However, I'd like this text to fade out or hide on play so that it doesn't block the video or mess with the hover function. I'm assuming this will require Javascript. Can someone assist? Thanks in advance! HTML: <div class="container"> <video id="video" width="100%" height="auto" loop="true" playsinline="true" class="" onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;"> <source src="https://www.dropbox.com/s/tq636ve4wq81nir/IMG_3040.MOV?raw=1" type="video/mp4"> </video> <div class="overlay"> <p>Hover to play</p> </div> </div> CSS: .container { position:relative; } .container video { position:relative; z-index:0; text-align:center; vertical-align: middle; } .overlay { position:absolute; top:75%; left:0; z-index:1; font-size: 20px; font-family: Clarkson; font-weight: 800; font-style: italic; color: white; width:100%; text-align:center; vertical-align: middle; }
  12. Site URL: https://studiotdance.com/ Hi so I am wondering if it is possible to make the emoji in my website title be something that changes every few seconds. So it could start with the headphones but then that would fade out and the emoji of a dancer would fade in. Then that would fade out and the emoji of a computer would fade in. Something like that. Even if it was just custom header code for my main page, that would be cool but it would be better if it was something for the entire website. Also wondering why these two forum posts didn't work for me, I am trying to achieve both, but neither worked. One Two
  13. Site URL: https://www.mh316.org/bible-studies/the-god-of-new-beginnings Pass: myrtlefield I asked a question about slow loading images, but no response. I think I figured the issue is my accordion script. It seems that when it is active, SQ loads the Markdown Accordion box before the image at the top of my page. This makes it look like the page is very slow. However, if I add 'defer async' to the Custom Code JavaScript, the Accordion function doesn't load at all! Working code with slow image load: <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 h1').addClass('ui-closed').css('cursor','pointer'); $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle(); $(".markdown-block .sqs-block-content h1").click(function() { $(this).nextUntil("h1").slideToggle(); $(this).toggleClass('ui-closed ui-open'); }); }); Not working code with fast image load: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" defer async></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h1').addClass('ui-closed').css('cursor','pointer'); $(".markdown-block .sqs-block-content h1").nextUntil("h1").slideToggle(); $(".markdown-block .sqs-block-content h1").click(function() { $(this).nextUntil("h1").slideToggle(); $(this).toggleClass('ui-closed ui-open'); }); });
  14. 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
  15. Hi, We are trying to build a custom search page where depending on the search query, we want to display a customized results page. For instance, if a customer searches for walmart, we show him an hyperlink to walmart website, for amazon a hyperlink to their amazon's website. But if a customer searches for a string that we don't know about, we display an html page indicating we don't the query string. Any suggestions on how can we accomplish this? I'm familiar with javascript so happy to add custom codes if it would let us accomplish what we are looking for. Thanks!
  16. I am trying to use a code injection to allow for a form that uses conditional logic. I want to select multiple form field ids to hide specific fields from the form. However, when I try to set the display to none for those ids, the css is getting overriden by some website-wide css. Is it possible to put the form in a container so that I can select the ids within the container and keep the css from getting overriden?
  17. I currently have this code <details> <summary>[read more...]</summary> which allows me to have clients click the [read more] and expand to read the complete text. However the text "[read more] doesn't disappear, it stays on the page, with the expanded text below after it's been clicked on. Anyone know how to make the "[read more...]" text disappear once it's clicked to expand to the full text? The current code is <center><p><b> Founded in 1894, 4th generation Pascal Agrapart is humble, soft-spoken, and fiercely dedicated to expressing the terroir through his Champagne. Being in charge since 1984 and Pascal took the Domaine to become one of the finest grower estates in the Côte des Blancs. With 12ha of vineyards, throughout Grand & 1er Cru villages of Avize, Cramant, Oiry, and Oger, all owned and tended by the family with some vines in excess of 60 years of age...</b><details> <summary>[read more...]</summary> <p> <b> A natural approach is taken without the use of chemical pesticides or herbicides, the organic life of the soil is of utmost importance to assure the health and productivity of the vineyard. Ferments with the use of indigenous yeast are preferred which is considered crucial for wines to showcase terroir. To ensure the highest quality, Pascal limits his production in any given year. Ambroise Agrapart now joins his father at the Domaine and they continue to produce one of the most refined and complex wines in the region. Pascal has rebranded some of the cuvées under “Champagne Pascal Agrapart” to signify wines in which he is solely responsible for crafting. </b> </p> </details></center> Note: this website is currently under construction. Please refer to images attached.
  18. Site URL: https://sponge-lychee-awaf.squarespace.com Password is "1" I am having problems with Javascript. I don't know how to code in Java script so I was wondering if anyone can help me. I have a java script code for Luxy scrolling for smoother scrolling like Webflow, and I also have a code that works when scrolling on a page, the background colours fade together. For some reason, they don't like one another. The fading when scrolling no longer works and removes my background. Here is my code: Background change colour when scrolling: Header <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div wm-plugin="background-change-all"></div> Footer <script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script> Luxy javascript Header <!-- before <body/> tag --> <!-- Smooth scrolling --> <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: '#siteWrapper', }); } </script> <script> $(document).ready(function() { luxy.init({ wrapper: '#siteWrapper', wrapperSpeed: 0.085, }); }); </script>
  19. Site URL: https://www.roehrsguitars.net/store/guitar-builder A little background and setup: I'm a software engineer helping a friend out with a tool he wants to build for his site. It's a `guitar builder`, or `custom guitar visualizer`. Basically the whole idea is that it just lets the user visualize what the specs on their finished product might look like. So I built that out using JS and a neat library called Konva.js. Plugged it into his site using the code blocks and it worked like a charm. Now I want to include a 'Review Build' button on the configurator page that will redirect the user to a hidden product page I've set up (hidden via `CSS -> display: 'none'`, so still accessible via URL). The Issue: I need the product page to actually accept and use the values that the configurator page will send over. I see that the product pages use some `data-variant` logic to plug in the `JSON`. My attempts to manipulate those via the console or raw HTML and then have the `Add to Cart` button respect my modifications have failed so far. Potential fixes I can think of: - I saw there is a Product API, perhaps it would be better for the configurator to generate a new product when they click `Review Build`, then send them to that page? Downside is that that's quite a lot more work, and then we'd need a way to delete the new products if a user doesn't buy them or something. Or hide them. Idk. - Perhaps the `guitar visualizer` I built should actually just LIVE in the product page itself, and I should make the options part of the product options? And then just add all the listeners I need to the various `change` events? - Hopefully there is just some easy way to inject the data from the `guitar visualizer` straight into the product page? That's the avenue I've currently been trying, but no luck. I think if I send the data over a query string, then have a script setup on the product page to handle it, that would work. The problem is how to tell the product page to use the new values... Thanks for reading all this, and please help if you can think of a solution! - Matt
  20. Site URL: http://www.noelcoward.com/ Hi all - I have javascript on my site that makes the parent nav folder in a secondary menu clickable. Necessary because the site is combining three existing sites into one. But this parent folder item isn't clickable on mobile. Here is the code as I have it: <script> $(document).ready(function() { $('a.header-nav-folder-title[href="/Foundation-1"]').click(function() { window.location = "/foundation"; }); $('a.header-nav-folder-title[href="/archive-trust-1"]').click(function() { window.location = "/archive-trust"; }); $('a.header-nav-folder-title[href="/about-noel-coward"]').click(function() { window.location = "/bio"; }); $('a.header-nav-folder-title[href="/noel-coward-room-1"]').click(function() { window.location = "/noel-coward-room"; }); }); </script> What code do I need to add so that the nav folder is clickable on mobile?
  21. Here's the problem scenario. We are holding an election for my organization. We cannot do it in person. I plan to create a form where people can vote for nine candidates maximum. I would like to know if it is possible to add a script to a form that counts the number of check boxes checked and kicks the form back when it exceeds nine boxes checked, directing voters with an error message that informs them of the voting error. I'm also looking for info on how to implement it. Thanks!
  22. Site URL: https://www.amaraleaders.com I want to format the blog date to display as MM/YYYY instead of MM/DD/YYY. I have found solutions for rearranging the format, but not eliminating portions of it. Is it possible?
  23. Hi, I'm using the yui calendar block on a clients website. By default, the latest added event is on the bottom of the list which shows when hovering the date. Which, in our case, doesn't make sense, as we don't want to highlight the ongoing events from the past on top, but the newest event. As the calendar block doesn't have any settings like changing the order from ascending to descending, I already thought of an easy solution. Simply reversing the list like so: ul = $('.flyoutitemlist'); ul.children().each(function(i,li){ul.prepend(li)}) Unfortunately the calendar block can't be effected by any injected JS. To test it I tried things like: $('li').hide(); without an effect. Why is that? And is there a workaround to use custom JS? Kind regards and thanks in advance :)
  24. Site URL: https://shanesimpkin.co.uk Hey everyone, I've been looking for the answer on the SQ forums but haven't found the right answer. So I've set up my anchor links which work, however, how do I set the anchor to start at the top of a section rather than where the code block is? For example, the anchor for about goes directly to where the respective code block is but I would like it to stop at the top of a section
  25. My site uses v7.0. I was successful in blocking text selection for the whole site by injecting this code to "Code Injection": However, this did not work for the embedded Google Docs document and I was able to select the text inside both the code block and the embed block. I've also tried finding a solution from the Google Docs side, but there doesn't seem to be a way to stop this. Any suggestions?
  • Create New...