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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. We are running version 7.0 on the Bedford template. Developer mode is activated and I have the local environment setup, but the default javascript code comes minified. The current default is that the Navigation folders/dropdowns will open on hover, but I would like to modify this to operate on click only. Is there anyway to make this change from within squarespace or the JS code? Or would I need to rebuild the nav with new CSS and ids?
  2. 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.
  3. Site URL: https://tjr-new-site.squarespace.com/ hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0) These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis. Works (able to slide img around): https://tjr-new-site.squarespace.com/about Does not work (img can't move to the left past its starting place): https://tjr-new-site.squarespace.com scroll down to About pw: troysitehelp Any ideas on why it works in one place and not the other, and how to address? Thx.
  4. 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!
  5. Is there a way to change an item's colours depending on light or dark background colours? Any item like a header, or nav. I was wondering how we can implement colour change depending on section backgrounds.For example, a fixed H1 text in the middle of the screen, how do we make the text change colour WHILST SCROLLING between light and dark background colors?What's the best way to do this?I was trying out with color-blend-mode:difference but the effects felt too much on the eyes.Thanks in advance! ❤️ ❤️
  6. Site URL: https://journeycamera.com/ Semrush is showing errors listed as uncompressed JavaScript and CSS files. Is there help from squarespace on this?
  7. Site URL: http://www.cherrytreeinteriordesign.com I'm wondering if there is a way to make a simple list with cards and make the cards themselves clickable to another page (I use 7.1). I'm aware you can add buttons, but I don't like the way they look. I want it to look more or less like the attached picture. Thanks!
  8. I need a cubic yard calculator on my site and have found the code that I want to use here: https://codepen.io/dwill/pen/WqwGeG I am just trying to figure out how to put the JS code onto my Squarespace site. I can put in the HTML into a code block fine but then obviously the calculation doesn't work without the JS. How do I put the JS code into my site and link it to the HTML code block? Or if there is an easier built-for-you way of doing this please let me know!
  9. Site URL: https://www.waterdragonfabrics.com/ Hi folks, I hope you are all doing well! This might not be something that's generally posted here but I thought there are probably some talented people that could point me in the right directions. I'm looking to realize something, (with the help of an expert of course) that I don't really have any knowledge about. The project is planned for this page: https://www.waterdragonfabrics.com/ It is about creating an interactive chart that let's people choose and visualize various color combinations and clothing designs in some kind of interavtice chart. This is a tailor-shop for traditional Chinese martial arts clothing. We offer a variety of different designs (cuts), fabrics, and options for the trim (multi colored outfits). The customer can browse the shop and choose from a variety of examples. He then adds his preferences, fabric choices and variations. Some products have a pop-up form that shows up when they click on the "add to cart" button. This is used to fill in sadditional information. The customer submits his measurements after placing the order. You can see that this process is rather difficult and creates lots of friction in the checkout process. I am not sure if this is something that can be realized but I'm sure you will let me know. 😉 My plan is to create a drawing (probably a vector file?) with simple black lines for each upper garment. This means there will be a shirt with long sleeves, another drawing is the same shirt with long sleeves but different cuffs, then a short sleeve shirt etc. Each design will be a different variation. Sometimes the variation is only slightly different like the amount of buttons. This means there will be a good 20-30 drawings in total. The next step I am imagining is to link all these pictures to a text link in a chart. In other words, if the customer clicks on "Traditional shirt with long sleeves" the allocated drawing will show up. Up to this point I believe it's not too bad to realize. However, my next wish is as follows: I would love a feature that allows the customer to color different sections of the individual drawings. That means the section of a trim detail, for example the cuff, can be colored by simply choosing a color from a normal color palette. The goal is that the customer can visualize the color combination. Our goal is to make the internal processes easier and get rid of the friction in the checkout process. If we can somehow connect the choices of the customer, may it be a direct link to the shopping cart with allocated variants connected (to adjust the price according to the customers choices) or even simply to submit the choice via email or to download the choices for sending them to us manually, that would be great. We try to get the customer to make a purchase as quickly and easily as possible to remove the friction. The prices will change depending on the design variations and not the color variations. This means the filled-in color choices would not have to be linked to a different price, only the design option (that's allocated to a different drawing). We do have different prices depending on the fabrics, but I'm open to simplify for the sake of convenience for the customer. The more intuitive this chart can be, the better. The more we can link the customers' choices to different price selections the better. If we can somehow guide the customer directly to the shopping cart after selecting this would be great too. I understand that this requires a bunch of coding, possibly Javascript, html or even programming. If you think that squarespace is a bit limiting for creating something like this, we'd also have a separate web server that possibly works instead. We could somehow connect them. If there are any simplified solutions that have a similar effect, reducing friction and making it easier for the customer, I'm open to hear any suggestions. For us it would be very convenient if the customer somehow submits this drawing with his color choices because we'd be able to use it for processing the order with our tailor. So we'd save some time there, too. I will be able to provide all the drawings made via illustrator or photoshop. Please let me know your thoughts on this project. If you think I can begin creating the drawings (since these will be part of the project no matter what) what file would you make them as? Or am I imagining things too easy? Again sorry if this in the wrong place. Maybe someone knows someone that's really good at this stuff. I am looking forward to your reply.
  10. Site URL: https://www.nordlysenergi.com/ Is there a simple way to redirect Naked domain(Root domain) to another page with JavaScript? and if so does any one have a quick solution? Example -> nordlysenergi.com (Root domain) ---> nordlysenergi.com/strom/ 301 redirect does not work for this.
  11. Site URL: https://dogfish-rhubarb-phn9.squarespace.com/contact I have a client that would like the form on their contact page to 'auto tab' to the next field, particularly when the user is typing in the phone number, he would like it to automatically jump to the next box. If anyone can help with the code for this please let me know! I have tried a bunch of different things that haven't worked, I am trying to apply jquery onKeyUp event but I can't figure out how. The password on the site is FlowersbyB.
  12. Site URL: https://www.emilyfrancesippolito.com/store/pweq1zwv73uxtw0pmrem4v1hexdwb9 Hi everyone! I was trying to add a 5 star review and comment section below my product. I've followed the steps on the squarespace page about adding product reviews and it's not working... Any help would be great! Thank you! This was the page I had looked at: https://support.squarespace.com/hc/en-us/articles/206540767-Adding-product-reviews
  13. My SEO advisor has suggested that we 'turn off lazy loading' as Google is not seeing any content 'below the fold'. Can this be done, or can anyone advise on this? Thanks
  14. Site URL: https://tracytredoux.com/journal-posts/2021/9/7/03slnvzopxaxb558ax3lvj1o1fnpua Hi, **I have amended the description of this problem after further investigation I created some java script code to display a total of checkboxes ticked in a form on a blog post. It seems that the script does not run when the page loads the first time, but then works if the page is refreshed. Also, I tried dropping the same code into a standard Squarespace web page and it works fine, so the issue is only happening with the blog pages. I'm very confused! I am attaching the code below. Thanks for any help. <script> $(function() { $("input[name*='symptom']").on("change", function() { var total = 0; $("input[type='checkbox']:checked").each(function() { total += Number($(this).val()); }); $("#total").val(total); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> legend { color:#a81918; padding-left:4px; padding-right:4px; } fieldset { border:1px solid #a81918; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } </style> <form action=""> <fieldset> <legend> <span style="color:#6a6a6a"> Select the symptoms that apply to you </span> </legend> <input type="checkbox" name="symptom1" value="1" id="cravings"> <label for="cravings">Cravings for carbs, sugar and caffeine</label><br> <input type="checkbox" name="symptom2" value="1" id="swelling"> <label for="swelling">Excess swelling</label><br> <input type="checkbox" name="symptom3" value="1" id="fatigue"> <label for="fatigue">Fatigue: relieved by eating</label><br> <input type="checkbox" name="symptom4" value="1" id="feel-off"> <label for="feel-off">Feel 'off' when you have not eaten</label><br> <input type="checkbox" name="symptom5" value="1" id="nervous"> <label for="nervous">Feeling nervous</label><br> <input type="checkbox" name="symptom6" value="1" id="hangry"> <label for="hangry">'Hangry' between meals</label><br> <input type="checkbox" name="symptom7" value="1" id="headaches"> <label for="headaches">Headaches</label><br> <input type="checkbox" name="symptom8" value="1" id="dizzy"> <label for="dizzy">Lightheaded, dizzy, or foggy brain</label><br> <input type="checkbox" name="symptom9" value="1" id="nausea"> <label for="nausea">Nausea</label><br> <input type="checkbox" name="symptom10" value="1" id="focus"> <label for="focus">Difficulty focussing</label><br> <input type="checkbox" name="symptom11" value="1" id="lethargy"> <label for="lethargy">Fatigue and lethargy</label><br> <input type="checkbox" name="symptom12" value="1" id="cravings2"> <label for="cravings2">Food cravings, not satisfied by eating</label><br> <input type="checkbox" name="symptom14" value="1" id="hunger"> <label for="hunger">Hunger, even after eating</label><br> <input type="checkbox" name="symptom15" value="1" id="thirst"> <label for="thirst">Increased thirst</label><br> <input type="checkbox" name="symptom16" value="1" id="fat"> <label for="fat">Mid-belly fat</label><br> <input type="checkbox" name="symptom17" value="1" id="vision"> <label for="vision">Vision disturbances</label><br><br> Total <input type="text" value="0" id="total"> </fieldset> </form>
  15. 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>
  16. I'm trying to integrate this horizontal scroll into my website. Tried adding the html, css encased in <style> and adding all the necessary script. However it didn't seem to work. Anybody able to shed some light on this ? https://codepen.io/cameronknight/pen/qBNvrRQ <div class="container"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <style> :root { --text-color: #111; --bg-color: #b9b3a9; } section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } </style> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script>
  17. Site URL: https://pelican-snail-erg5.squarespace.com/ I'm trying to make a similar side navigation/ status bar shown in the video. Would there be a way to do this in Javascript or CSS, or is there a plugin for it? Thanks, Zack side statusbar.mp4
  18. Site URL: https://dtmg.io Is there a way to add an onclick function to a button's href code? I've been googling and can't find anything. Thank you!
  19. Site URL: https://www.betweenbox.com/shipping-cost/ I am trying to add a shipping rate calculator to my website - like the attached images and site. I would like to show a range of different carriers like... Royal Mail, FedEx, UPS, DHL I have been searching the internet for hours and have not got very far :( If anyone has any tips, it would be much appreciated. Thank you in advance!
  20. Does anybody know how to replicate the scrolling animation from this site https://selangorsummit.com/sabc-2/ at the Why attend section (yellow background) onto my website -- https://www.unswaseanconference.com/networking-info on the Why attend section (blue background).
  21. Site URL: https://theartisanstudio.uk/ I began my question here:
  22. Site URL: https://www.cestplusquedelasf.com/podcasts Hello, I have a problem with a jQuery code injection, which works perfectly on the back-office but does not work on the online version of the website. The most frustrating thing is that it works fine on the online version when I refresh the page, but not when I get there by clicking on a link. I have of course checked and the code is indeed present in the <head> section of the relevant pages. The code concerns the replacement of certain words by others, more relevant for users and SEO, available here : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(function($){ $(".BlogList-filter").html(function() { return $(this).html().replace("Articles", "Podcasts"); }); }); jQuery(function($){ $(".BlogList-pagination-link-label").html(function() { return $(this).html().replace("Plus anciens", "Podcasts précédents"); }); }); jQuery(function($){ $(".BlogList-pagination-link-label").html(function() { return $(this).html().replace("Plus récents", "Podcasts suivants"); }); }); </script> Do you have any idea what's going on? Thank you in advance, Best regards,
  23. I'm trying to add this code: <script charset="UTF-8" type="text/javascript" id="idxwidgetsrc-20693" src="//holmesgroupmn.idxbroker.com/idx/carousel.php?widgetid=20693"></script> Is there something wrong with it? The site I'm taking it from makes it sound like it's just as easy as dropping this into a code box. I tried that in the middle of the page where I'd like this to appear and as you can see it doesn't do anything. I've also tried putting it in the source code (header and footer) and nothing happens. This is a Current Listings widget for a realtor from the IDX Broker service, which Squarespace recommends. I'm using the Ventura template. No index pages. Any help is greatly appreciated!
  24. so i want to have users to agree on two things (in checkboxes) before they can submit a form to me.(just like you cant proceed without agreeing the term and conditions on some websites/services) how would i do that?is there a way in javascript to check by the ID of the checboxes if they are checked or not (true/false), and if they arent checked - and try to submit the form -> they will get a pop-up saying they must check the inboxes before submitting the form?thanks
  25. Hi there, Canva has this new option of designing whole web pages. Say like this: https://www.canva.com/design/DAEXCxiz7e0/payRZVwHhvQ2q2FtNnX2zg/view?website#2:quick-and-hassle-free-shopping Can anyone tell me if it's possible to embed the whole page design in Squarespace? When I enter the Canva embed code in the page header, which is the following: <div style="position: relative; width: 100%; height: 0; padding-top: 48.1481%; padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAEXCxiz7e0&#x2F;view?embed"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAEXCxiz7e0&#x2F;view?utm_content=DAEXCxiz7e0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Black Experimental Art Deco Fashion Website</a> it only shows as a full width Canva slideshow, even if in Canva I have selected the option 'scrolling website'. I guess there is something in the code that needs to be changed so it shows as a website, not a slideshow. Can anyone help me display the whole thing as a site, like designed?
×
×
  • Create New...