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://hawk-walrus-dxd2.squarespace.com/ Hello! Is is possible to add breadcrumbs to entire site? ๐Ÿ™‚ pw is xenia Thank you in advance!
  2. 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!
  3. Good afternoon. I have custom codes (not created by me) that I would like to add my site. Specifically on a certain page. It contains javascript, CSS and HTML. The purpose of this custom code is to randomly generate images (saved on a folder in my desktop) at a click of a button. I've tried everything I could think of and nothing seems to be working. I should also note, I am not a coder. Any advice or help is appreciated!
  4. My site is still being developed, but as I am coming close to completion and going live with it I am running into a slight issue. The issue is I have a contact type form on my site which collects ratings (based on 3 or 4 questions, 1-5 scale), pretty standard. This is being populated into google sheets per square space set-up. My issue is I can't find a way to pull back the ratings and create a report on my site based on those ratings. My question is. Does Squarespace offer such a solution to query google docs and bring back those ratings? If this can be done on the fly that would be great, less human interaction the better. Thoughts? Thanks! AWL
  5. Hi all, I am not quite sure if I am tagging the right thing for the topics. But I am looking to create a job-finding site where it will require two types of users, people who are finding a job and people who are finding an employee. My question is, is there any add-on or third-party extension of some sort that could potentially make this an easier task rather than coding all the way through? possibly something like this site. https://www.jobsite.co.uk Thank you! Best T
  6. Site URL: https://seahorse-star-zkf7.squarespace.com/ Hello, Does anyone know how I can change the error messages on forms when it encounters an error? I'm trying to change the wording on the error message that pops up.
  7. Does anyone know how to change the button text "Post Comment..." on blog commenting? I'm working with 7.1 for this particular site. I believe this has to be done via JS based on instructions I've seen for changing "Read More" text, etc. Thanks in advance!
  8. Site URL: https://ashleyguicecreative.com/ I have implemented a "typewriter text" effect with javascript on my client's site. However, I only want this function enabled on desktop/tablet view only, not on smaller mobile screens. See the section I am referring to here: Screen Recording 2022-09-12 at 12.26.12 PM.mov I'm not familiar enough with javascript itself to implement a media query that would allow this, so any help on how to write this would be greatly appreciated!! Thank you!
  9. Site URL: https://forum.squarespace.com/topic/158057-date-display-format-options/?fbclid=IwAR3c-LN_AFmqlTWG6uPvXzXLV9TqUKihXMjjvyrHfLgn-0NEqg2yXnztUys#comment-447653 Hi guys, Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you . 1. Add the following codes to Home > Settings > Advanced > Code Injection <!-- Fix inconsistent blog date format on Squarespace 7.1 template --> <!-- Squarespace Forum Update 06-11-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> (function(){ document.addEventListener('DOMContentLoaded', function() { const dateformat = "dd-mm-yyyy"; const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date"); pubdates.forEach(pubDate => { let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText); if (pubDate.classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script> 2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,... Hope that it can help your sites properly Let me know if you have any issue that needs to be solved. Support me by pressing ๐Ÿ‘ if this useful for you
  10. Hi, I have a snippet of JavaScript to add as well as a code to copy and paste in order to make my custom forms come to life on my website (for newsletter subscription) related to my Mailer Lite account, but it isn't working. I saw on the guides of SquareSpace that: - I must display JavaScript code as text by default ; - switch the Display Source toggle on in the code block ; - surround the code with <script> </script> tags ; but it doesn't work. I need help but SquareSpace Support is unable to help me with JavaScript issues. Anyone knows how to make this work? Thank you in advance.
  11. Site URL: https://www.afroposters.com/posters/p/carte-abidjan-noirblanc How to change the currency symbol ? Hello, my website is targeted at customers in West Africa, our currency symbol being" XOF ". (I do not use the e-commerce payment features, but still need the store structure for my business.) I was using a CSS code I found to just change the currency symbol (full tutorial here) : .sqs-money-native:before { content:none !important; } .sqs-money-native:after { content:' XOF '!important; } But with the changes to the price formatting, this has stopped working (it is back to showing the "โ‚ฌ" symbol) ! How it is :" 15 000,00 โ‚ฌ" ---- what I want ----> "15 000 XOF" Can someone please help me, for the moment I will try and hide the prices, but it's terrible for business. The website is : www.afroposters.com We are on the commerce basic plan. (I read that some JavaScript might be required) Thank you all very much in advance !
  12. Site URL: https://cby.squarespace.com/ I am trying to add extra nav bars to the end of my Mobile Menu, as well as an Instagram Feed to match the attached mockup. It was working earlier, but for some reason is no longer sticking. I tried moving it to the Header Injection, however it conflicts with the Mobile Overlay pop-out when clicking the hamburger menu, and in the Footer Injection, nothing happens... Any help much appreciated! <!---Mobile Menu Footer ---> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('#mobile-menu-footer').clone()appendTo('.header-menu-nav-folder-content'); }); </script> <!---END Mobile Menu Footer --->
  13. Site URL: http://philipmarksart.com I am trying to use javascript to dynamically send emails to my customers who have inputted their email and then hit a button. The button can be a submit button for a form or just a button. My domain "philipmarksart.com" is managed by squarespace, and i have a custom gmail email "philip@philipmarksart.com" which I have connected to squarespace. I have submitted forms which send appropriate emails to this email address when i hit a submit button. I have also used third party products and have sent emails to multiple email addresses but the emails have to be set up previously and cannot be dynamically changed. So far, I've used javascript successfully to implement a lot of custom handling on this website. From what i have discerned by web research, I believe i need to modify my squarespace and/or google DNS settings and hook up with an smtp server to accomplish this task. Google workspace provides a free smtp server which I hope i will be able to use for this purpose (although I would use other smtp servers if necessary). What i need help with is how to set up my dns records to accomplish this. Unfortunately i don't have any experience on what to add or remove from my dns table. I would appreciate any help i can get with respect to this issue. I have attached screen shots of my squarespace dns information. I would think that this capability would be useful to a lot of squarespace users. Thanks -- pjmsr.
  14. 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!
  15. I uploaded a simple text file to my Squarespace site (Business Plan subscription, 1 year auto-renewal). I injected javascript into the footer to test code to read the contents of the file (see below). The output in the Dev console (Firefox) is not the contents of the file I expected, but rather - Records: <empty string>. I've used this technique successfully on Wordpress sites. Any idea why this isn't working on Squarespace? UPDATE: Looking deeper, is it possible the responseText is empty because Squarespace doesn't put 'Access-Control-Allow-Origin' in the request's response header? If so, is there another approach I can use to accomplish my goal? <script type="text/javascript"> rawFile = new XMLHttpRequest(); rawFile.open("GET", 'https://lily-pike-4bpy.squarespace.com/s/motd.txt', false); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var allText = rawFile.responseText; console.log('Records:',allText); } } } rawFile.send(null); </script>
  16. Site URL: https://elephant-raspberry-f4jz.squarespace.com/about-us Successfully added HTML + Java & CSS for make a gallery slider section at the bottom of the "Our Culture" page but now all the other sections on that page are gone -- but it's still showing the gallery. I feel like I am so close to success! I'm not sure if it's something I did with the code or something else. Below is the code that I modified (and probably botched) from this CodePen: https://codepen.io/sfi0zy/pen/PoGvYyy Code Block: <link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' /> <script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script> <div class='scroll-animations-example' data-scroll-container> <div class='scrollsection' data-scroll-section> <div class='item -normal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/1005/300/400'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/Rdhhm02.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/UUTdpwt.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/DJaduFT.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CWOwpwF.jpg'> </div> <div class='item -big -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -small' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/Ncd1GTP.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://picsum.photos/id/1056/300/400'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://picsum.photos/id/1062/400/300'> </div> <div class='item -big' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://i.imgur.com/CNhqK3N.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/ZbEkM0c.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/vi1E64P.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/sy3SA3P.jpg'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/111/400/300'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="4"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -big' data-scroll data-scroll-speed="2"> <img class='image' src='https://picsum.photos/id/137/600/800'> </div> <div class='item -normal -horizontal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -small -horizontal' data-scroll data-scroll-speed="3"> <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'> </div> <div class='item -normal' data-scroll data-scroll-speed="1"> <img class='image' src='https://i.imgur.com/YluXeH7.jpg'> </div> </div> </div> <script> class Example { constructor(options) { this.root = options.root; this.init(); setTimeout(this.showImages.bind(this), 1000); } init() { this.scroll = new LocomotiveScroll({ el: this.root, direction: 'horizontal', smooth: true, lerp: 0.05, tablet: { smooth: true }, smartphone: { smooth: true } }); this.images = this.root.querySelectorAll('.image'); [].forEach.call(this.images, (image) => { image.addEventListener('click', () => { image.classList.add('-clicked'); this.hideImages(); }); }); } showImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-clicked'); image.classList.add('-active'); }); } hideImages() { [].forEach.call(this.images, (image) => { image.classList.remove('-active'); }); setTimeout(this.showImages.bind(this), 2000); } } window.addEventListener('DOMContentLoaded', (event) => { const example = new Example({ root: document.querySelector('.scroll-animations-example') }); }); </script> Custom Css: //CULTURE PHOTO SLIDER// #block-yui_3_17_2_1_1662153700056_214084 .scroll-animations-example { > .scrollsection { padding: 10vh 10vh 10vh 10vmax; min-width: 550vh; } > .scrollsection > .item { display: inline-block; position: relative; margin: 0 -30vh 0 3vh; } > .scrollsection > .item::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } > .scrollsection > .item.-big { height: 80vh; width: 60vh; } > .scrollsection > .item.-big.-horizontal { height: 60vh; width: 80vh; } > .scrollsection > .item.-normal { height: 60vh; width: 45vh; z-index: 1; } > .scrollsection > .item.-normal.-horizontal { height: 45vh; width: 60vh; } > .scrollsection > .item.-normal:nth-of-type(3n) { bottom: 5vh; } > .scrollsection > .item.-normal:nth-of-type(4n) { bottom: -5vh; } > .scrollsection > .item.-small { height: 40vh; width: 30vh; z-index: 2; } > .scrollsection > .item.-small.-horizontal { height: 30vh; width: 40vh; } > .scrollsection > .item.-small:nth-of-type(3n) { bottom: 13vh; } > .scrollsection > .item.-small:nth-of-type(4n) { bottom: -13vh; } > .scrollsection > .item > .image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(1); opacity: 0; pointer-events: none; transform: translateX(0) translateY(0) scale(1); transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item:nth-of-type(4n) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: 0; } > .scrollsection > .item:nth-of-type(4n - 1) > .image { transform: translateX(30vh) translateY(30vh) scale(.8); transition-delay: .05s; } > .scrollsection > .item:nth-of-type(4n - 2) > .image { transform: translateX(-30vh) translateY(30vh) scale(.8); transition-delay: .1s; } > .scrollsection > .item:nth-of-type(4n - 3) > .image { transform: translateX(-30vh) translateY(-30vh) scale(.8); transition-delay: .15s; } > .scrollsection > .item > .image.-active { transform: translateX(0) translateY(0) scale(1); opacity: .8; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-clicked { transform: translateX(0) translateY(0) scale(5); opacity: 0; pointer-events: auto; transition: filter .3s ease, opacity 1s ease, transform 1s ease; } > .scrollsection > .item > .image.-active:hover { height: 100%; width: 100%; position: absolute; top: 0; left: 0; filter: grayscale(0); opacity: 1; cursor: pointer; } }
  17. Please see Scrolling Block Text Gradient. Scrolling Block Text Gradient.mp4
  18. Site URL: https://espacedesign.squarespace.com/ Hi, I have coded a mega menu for my site https://espacedesign.squarespace.com/ (password: espace) using CSS and Javascript. It opens when you hover over "Menu", however, it does not stay open somehow? It closes as soon as I move my mouse away from the Menu button. Can anyone help with this? I followed the instructions here to code the Mega Menu: https://www.will-myers.com/articles/building-a-mega-menu-in-squarespace-71-free
  19. 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
  20. Site URL: https://www.swoopanalytics.com/ I am trying to change all ยฎ symbols across my site to superscript. There are too many to manually change all of the text blocks to code/markdown blocks so I'm looking for a javascript or CSS solution. Any suggestions would be very much appreciated!
  21. Site URL: https://inquisited.squarespace.com https://inquisited.squarespace.com pw: 20reformette22 Have seen a few similar threads on here without solutions... The default settings for the slideshow block seem to be that each slide's opacity goes up, then down, and then the slide is hidden. I would like for a smooth transition between the images in my slideshow, which each build upon the one before. So in theory, it should be: opacity goes up, does NOT go down, slide remains VISIBLE. I've tried so many things here and can't figure it out! Any advice? Thanks in advance ๐Ÿ™‚ FYI - I have tried making each slide's background the same color as the site (rather than transparent) and adding this code, but then I lose the ability to fade IN each slide. .slide {opacity: 1 !important;}
  22. Hi, I currently have a header that disappears on scroll down and reappears on scroll up. It's working really well using the code below. However I would also like the header to reappear when the user moves the cursor near to the top of the viewport. Can this be done with javascript? site: https://adrisenergy.squarespace.com/ password: 1234 Any help greatly appreciated // Hide Header on on scroll down var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('header').outerHeight(); $(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 50); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If they scrolled down and are past the navbar, add class .nav-up. // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > navbarHeight){ // Scroll Down $('header').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $('header').removeClass('nav-up').addClass('nav-down'); } } lastScrollTop = st; }
  23. Site URL: http://www.lerligisa.com Hi, I created a multilingual website (French, English), and I would like the notification to clients email to appear in the language of the website they are navigating on, and making their order from. For example, if a French user is ordering on the French version of the website, I would like his confirmation email order to be in French, and not in English. Same thing for the confirmation shipping order email, the payment declined email, and the confirmation of subscription to the newsletter etc... Squarespace only allows me to use one language at a time for now. So all my notification to clients are in English. How can I add a language tag on my website? Thanks in advance! Eva
  24. Site URL: https://fredfilms.com Hi, My website has a scrolling index/homepage with multiple 'blank' pages nested. I added a banner image to the top page with a text overlay and would like that banner image to randomly load each time someone visits the page. Any help would be greatly appreciated!
  25. 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>
  • Create New...