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. hi everyone.. working on a fundraising site for covid-19 relief.. trying to embed a contribution form via code block but the height is limited, forcing one to scroll to see full form... I also tried putting the code into a squarespace embed block. I tried putting entire embed code i was give, including script, into a squarespace code block. I tried putting entire embed code i was given, including script, into a squarespace embed block. I tried injecting script into site-wide head as well as page specific head. I identified block ID and tried CSS injection to change height of block. Nothing works. Anyway you can help? Thanks in advance!
  2. Site URL: https://salientglobal.com/home-draft Hey all, I am trying to add in some javascript so I can get the author bio avatar photo to show up on under the featured blog post in a summary block on the home page (using list style). page is https://salientglobal.com/home-draft pw is: pagepreview here is the script i am trying to insert: I've tried it both as a separate code block and injected into the header of the page. <script> var img = document.createElement("img"); if (document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name1') != -1) { img.src = "INSERT_IMAGE_HERE"; img.setAttribute("style", "width:80px;"); } else if { document.getElementsByClassName("summary-metadata-item--author").innerHTML.indexOf('Author Name2') != -1){ img.src = "INSERT_IMAGE_HERE"; img.setAttribute("style", "width:80px;") } else { img.src = "NO_PHOTO_IMAGE" } var block = document.getElementsByClassName("summary-metadata-item--author"); block.appendChild(img); </script> Any thoughts on if what I am trying is even possible? Or anyone else have a more elegant solution than the above?
  3. 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!
  4. Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237 Hi guys, After a long time with Squarespace community, I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own. Let 's move to the cool part Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it. step 1.mp4 Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.min.js"></script> <script> $(document).ready(function() { if (window.self!==window.top) { return; } // Issue 02 $("[href='#read-more']").each(function(i, el) { // First calculate the initial space between the content and the readmore tag const contentEl = $(el).closest(".html-block .sqs-block-content, .summary-excerpt"); if (contentEl.length == 0) { return false; } const elBound = (el.getBoundingClientRect()); const contentBound = (contentEl[0].getBoundingClientRect()); contentEl.readmore({ collapsedHeight: elBound.y - contentBound.y, speed: 500, embedCSS: true, lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>' }) }); }); </script> <style> /* Tweak readmore js to hide the placeholder link */ [id*=rmjs] { transition: height 200ms; overflow: hidden; } [id*=rmjs] [href='#read-more'] { display: none; } body.sqs-edit-mode [href='#read-more'] { display: inline-block !important; } </style> Notice: You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content step 2.mp4 After applying 2 above steps, here is the result you can achieve result-readmore-readless.mp4 Is it hard for you to follow my steps? Does it work properly on your site? If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me. 'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community Thanks for your attention! Support me by pressing 👍 if this useful for you
  5. Site URL: https://wolf-kumquat-dpgn.squarespace.com/ Hi all: Looking for a solution to add a second/additional logo to the top left of the header. See university logo on the left in the mock-up for what I am trying to achieve. Ideally this logo would click through the the university website: https://www.kuleuven.be/english/ Site: https://wolf-kumquat-dpgn.squarespace.com/
  6. Site URL: https://www.sekyiwabrooke.com Hey all, I found a method to add a lightbox link but I'm not sure how to get it to work with an <iframe> to embed Youtube videos? I've tried with a regular <video> and that works fine but the <iframe> is blank black. Page - Code Injection Code Block #1 (The Lightbox Info) Code Block #2 (The Link) The video pops up but it's not loading/linking to the Youtube url. I also don't know how to fix the sizing to make the lightbox bigger. Any help would be appreciated! Thanks,
  7. Site URL: https://www.oryxdentalsoftware.com/tablecomparison-edit Hello, I did a table using htm css an js. The rows in light blue are expandable. When the page first loads it's showing these sections expanded instead of collapsed. How I can make them collapsed when I first visit the page? Also I would like to add an arrow (up/down) for collapse/expand next to the title. Can I make the first 2 columns, the header and the footer fixed (shown in attachment) and make the remaining body part scrollable horizontally? It would be good especially for mobile. Thank you
  8. Hello Squarespace community! I am new at web designing and am not experienced with coding. I am searching for a way to incorporate a sound effect on an image click. My client wanted a keyhole image that you click on to access the specific page it is directed at. I created the keyhole buttons by using a duplicate image set up as an image gallery. I have a 0:02 second WAV file that I am trying to figure out how to add it to each image so that a sound effect of a key unlocking a door will sound when the image is clicked. Is this possible for me to do...with no knowledge of coding? I reached out to someone I know for help (they also helped with the coding for centering the image title), but they are not familiar with this and said it will require javascript... If anyone knows of a code that would work or have some simple steps that I can follow along with, that would be so great! Thank you in advance for any and all help provided!
  9. Hi, is it possible to implement this cursor to my Squarespace 7.1 site https://codepen.io/dumontmatteo/pen/bGpdjNV ? I have already tried to paste the three columns to my custom CSS, but it doesn't seem to work. My site is not yet published, so i'm unable to provide a link. Thank you
  10. I need to add subresource integrity (SI) to my squarespace site, but I have no idea how to do that or if it is even possible. If you aren't familiar with subresource integrity, it is simply including a hash of a javascript file inside the javascript tag that loads that library. The browser uses the hash to ensure that the library being downloaded hasn't changed since the hash was generated. So for example, here is the tag that loads one of the SquareSpace libraries that my site uses: <script type="text/javascript" crossorigin="anonymous" src="//assets.squarespace.com/@sqs/polyfiller/1.2.2/modern.js"></script> I need to get an "integrity" attribute in there somehow. Suggestions?
  11. Site URL: https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Hello, I have coded accordions for my website and they seem to work for some people and not others. I've been able to recreate the issue where the accordions don't open on google chrome and mobile view via google chrome. I'm not seeing any particular errors in the console that is pointing to this issue. Could anyone see if they are able to recreate this issue in chrome or if they are able to help? https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Password: "SuperTrip"
  12. Site URL: https://www.thezimaconfession.com/ This javascript makes my site look slow according to all sorts of SEO site checking tools. What can I do about this? Here is the weight of the 10 heaviest resources over the network, and that are necessary to load the page: s.gr-assets.com/assets/react_client_[...]es-2e2b90fafc.js (640kB) s.gr-assets.com/assets/application-2[...]7fc3127159191.js (278kB) assets.squarespace.com/universal/scr[...]7a0-min.en-US.js (172kB) assets.squarespace.com/universal/scr[...]619-min.en-US.js (170kB) s.gr-assets.com/assets/desktop/libra[...]7e2cf0b06486f.js (155kB) assets.squarespace.com/universal/scr[...]e32-min.en-US.js (149kB) securepubads.g.doubleclick.net/gpt/p[...]2701.js?31063002 (122kB) platform.twitter.com/widgets/widget_[...]ww.goodreads.com (106kB) s.gr-assets.com/assets/goodreads-2de[...]f46071f1f6f6.css (102kB) s.gr-assets.com/assets/react_client_[...]er-1325460bef.js (99kB)
  13. Site URL: https://www.frillup.ch/ I am trying to add comment section and ratings for each product on my E commerce. I found something that only allows me to either add ratings or comment box, but not both. I would like some feedbacks from my customers. Can anyone please help me with that? https://www.frillup.ch/
  14. Site URL: https://ladybug-flounder-tcne.squarespace.com/ Hi! I am new to coding and currently trying to paste this code into my squarespace website: <iframe width="920" height="300" src=" https://fnugg.no/widget/resort/?id=37&theme=light " frameborder="0" allowfullscreen></iframe> I would like it to show just the weather, celcius and icon like they have managed here: https://hemsedal.com/vær I'm having problems understanding API's and how I use them, as I have just done simple coding until now in design, but never done anything like this. I asked the company that makes the program, but the only thing they gave me was this website and told me to use the ID number 37: https://api.fnugg.no/ I have no idea what I am doing at this point, so if anyone can help me understand, please do. The password for the webpage is: 1234 Thanks in advance 🙂
  15. Hi, any help appreciated. Unable to get this script working. I have logged out of squarespace, set view to public with a password, but no luck. The page displays the actual javascript code. Thanks in advance. <SCRIPT language="javascript" SRC=http://links.christiansunite.com/blessing.cgi?type=Verse&table=1&width=210&zone=0></SCRIPT><noscript>You need Javascript enabled to view these blessings. <a href="http://bible.christiansunite.com/">Bible Study Aids</a></noscript>
  16. Site URL: https://fbcamherst.squarespace.com/staff Password on site is: fbcfbc I am trying to add a read more, expandable text field to our images using this method. I'm currently using a gallery, which does not allow HTML within the caption. As you can see, we have a lot of text. Is there a way to enable HTML inside these containers? Is there another way to create an expandable field of text within image captions? Thank you!
  17. Site URL: https://www.formscore.today/ We are looking at adding https://reciteme.com/ to our site. They note that it requires a line of Javascript code to implement. Has anyone added this to their site before or have any flags we need to look at prior to implementation to ensure it's compatible with our squarespace site? Thanks
  18. Site URL: http://www.saladishy.squarespace.com Hi Guys! @tuanphan I found your code online for loading page image which is working great - THANK YOU! Is there anyway I can have it so that the screen is black at first, the logo fades in, and then fades out as currently is? Appreciate any help. Thanks
  19. 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.
  20. When I am on a member page, is it possible to read information on the member using Javascript? For example, name, email, id? Thanks,
  21. 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! ❤️ ❤️
  22. I want to dynamically replace text on my landing page based on the Google Ad search string. For instance, if the string includes, "Texas," then I'd like the landing page to read, "We love Texas!" I assume it's done with javascript on squarespace. Do you have an example and code block?
  23. 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
  24. Site URL: https://www.davidjackspencer.co/ I have successfully created a custom cursor using the code below, but cannot figure out how to add a delay to the cursor movement like this example here: https://codepen.io/ciprian/pen/BazvjRZ I've posted this in Settings > Advanced > Header <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> And this in Settings > Advanced > Footer <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> After doing that I've also pasted this in Design > Custom CSS @media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* This line is for the circle to invert Delete this line if you dont want the circle to invert */ transition: width 0.8s, height 0.7s, background-color 0.9s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 60px; background-color: #ffffff; } Any help would be greatly appreciated!
  25. Site URL: https://www.mamascoach.com Hey all, I'm working on integrating subscription access to a site I'm working on for a friend. I love the css and customization I currently have utilizing an entire image block as a link. That being said, I've discovered that there is a member's block in squarespace they want you to use to direct customers to their javascript popup. I'd like for the signup popup to popup from clicking my image block rather than their prepackaged member's blocks. Website is still in it's infancy, but here is the URL: www.mamascoach.com, password = password Above you can see the image blocks I'd like to use as links. Below is the member block button that I'd like to use the javascript from. I may be wrong, but I believe this is the javascript being triggered by that button: <script type="application/json" id="bootstrap-data"> {"loginDialogConfig":{"headerText":"Welcome to Mama's Coach","subheaderText":""},"createAccountDialogConfig":{"headerText":"Create Account","subheaderText":"","shouldShowReCaptcha":false,"reCaptchaSiteKey":"6LcLKWYaAAAAALAdf1Q4ri_EcSPPN4yRW0xxHdaX"},"xsrfToken":"MXw2MTJlYzZiZWVmMjU2YjQyM2UxYWI3MmY6MTYzMzI5NjkyOTkzMHxzQ0l4ZzdMSThKTXRIVDQwcUh5dlJQZ1lDeWVJNWdEb3hhTHdJcDRMMXYtZ0RMb2IxZUZNckRBV2ROM2hITW1R","loginOrigin":"member_area_block","memberArea":{"websiteId":"612ec6beef256b423e1ab72f","memberAreaId":"615a02f7961c542198d1a56d","groupId":"615a02f7961c542198d1a56d","title":"BASIC","paywallProductId":"3a7e5c8b-7243-4405-b07d-34b7fc4f459f","purchaseType":"PAID","aclIds":[],"joinButtonVisibility":"SHOW_JOIN_BUTTON"},"pricingOptionId":"fba0e268-a240-4c86-9517-e96ec58d5784","originUrlPath":"","pricingOption":{"id":"fba0e268-a240-4c86-9517-e96ec58d5784","price":{"currencyCode":"USD","value":1499,"decimalValue":"14.99","fractionalDigits":2},"onSale":false,"subscriptionPlan":{"productId":"3a7e5c8b-7243-4405-b07d-34b7fc4f459f","pricingOptionId":"fba0e268-a240-4c86-9517-e96ec58d5784","billingPeriod":{"value":1,"unit":"MONTH"},"planVersionId":"2a644235-ba82-472f-87b2-53848756357b","numBillingCycles":0},"subscribable":true},"websiteId":"612ec6beef256b423e1ab72f"} </script> I'm pretty desperate for help. Thank you so much! @tuanphan I know you always have so many helpful things to say!
  • Create New...