Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'code'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hey guys, this code I have found/put together from what i know, but when previewing in mobile, my hidden audio block doesn't autoplay. Can anyone help please? <script> window.addEventListener('DOMContentLoaded', function() { //wait for document load var audio = document.querySelector('.sqs-audio-embed'); //select the audio block var checkOnLoad = function() { if (window.pageYOffset > 200) { } else { audio.play(); } {audio.loop = true;} }; if (audio) { var url = audio.getAttribute('data-url'); //get the audio src Y.one(audio).ancestor('.sqs-block-audio').setStyle('display','none'); audio = new Audio(url); window.addEventListener('load', checkOnLoad); //listen for window load and toggle audio state checkOnLoad(); } }) </script>
  2. I was looking at another site made on squarespace recently (amandafarias.nyc), and was wondering how to achieve horizontal gradient overlays over an image and add text on top. I do think that these changes (on that site specifically) were made using CSS because the gradient modified as the page width changed. I was wondering if anyone knew how to code for something like this? thank you.
  3. Site URL: https://live-vitae.squarespace.com/about Hey peeps. Bit of a strange one... I'm embedding an interactive map on a clients website using a code block. (I'll link to where we're getting the map code from here: https://www.amcharts.com/visited_countries/#DE,NL,PT,RO,CH,GB,CA,GT,MX,US,BH,ID,SA,AE,AU) When I put the code in the code block and hit save, it is making the first slide of my summary block blank. I'll show you what I mean... I'm using the same summary block on two pages to pull through client testimonials. Exact same settings. On the Work With Me page (https://www.livevitae.com/personalised-nutrition-services )the summary block works great, but on the About Live Vitae page (https://www.livevitae.com/about-live-vitae) there is a blank slide being added to the summary block, so it looks like the content hasn't loaded. When you click the ">" it takes you to the first client testimonial. 🤯 I've double checked and there are no rogue blank client testimonial blog posts floating about... and when I remove the map code block from the section above, the summary block behaves perfectly normal. Any ideas?
  4. Site URL: http://www.taylornicoleportraits.com/availability I've been troubleshooting for hours and hours. I cant find any css or add any code to the iframe or anything to get rid of it. if I use the chrome inspect feature I can toggle the code that seems to be causing it, but none of the fixes i've seen in the forums google or anywhere fixes it. I just want the code block tall enough to fit all the content withOUT a scrollbar. it doesnt matter what height I set the iframe though, i literally set it to 1million pixels and that just makes a scrollbar that tall as well. here is what i've put in the code block: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.min.js"></script><iframe src="https://hello.dubsado.com:443/public/schedulerGroup/60fb1727a84ea303aaceed3a?isIframe=true" frameborder="0" style="width:0px; min-width:100%; min-height:500px"></iframe><script type="text/javascript">setTimeout(function(){iFrameResize({checkOrigin: false, heightCalculationMethod: "taggedElement"});}, 30)</script> help me remove this scrollbar please!
  5. Site URL: https://tangerine-raccoon-5lw5.squarespace.com/config/pages Hi everyone, thank you so much for taking some time to read this. I would like to create a carousel with images, with a title and a brief. Currently there are going to be 6 slides, and I was wondering if someone could help me code to do the following: As someone hovers over it, a pop up window will appear on the screen to show a short description. This is on the Home page.
  6. Site URL: https://www.elementhfp.com/memberships Hello, I have code supplied by Minbody for clients to Login or Register to their account. (Top left of my website) This is set up as a link in the primary navigation of the website. Link works and is functional however, when one opens the webpage the code displays in raw format to the user. This is the same case for the pricng links located on the membership page. The code used is as follows: Login | Register: <script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="102690" data-mb-site-id="5721400" data-bw-identity-site="false" data-type="account-link" data-inner-html="Login | Register" /> Sample Link (There are many): <script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="healcode-contract-text-link" data-site-id="102690" data-mb-site-id="5721400" data-bw-identity-site="false" data-type="contract-link" data-inner-html="Buy Now" data-service-id="107" /> Does anyone know how I can stop the raw code appearring to website users as the page loads. Thanks in advance!
  7. Hi Community, I am trying to have side by side code blocks. How do I achieve this? https://giraffe-stingray-tlr7.squarespace.com (password: cnsvalve)
  8. Site URL: http://greenpointsoftball.com/sample-page Hey there! I'm trying to rebuild a sports league website and we just need to be able to add in a table or something like it that would have a league schedule and another for the league standings. I have been Googling this for hours and cannot find any helpful results. Does anyone know of any good plugins for tables or work arounds to make it look similar to this? Thanks so much!
  9. Site URL: https://violin-papaya-mlxj.squarespace.com/ Hi, Does anyone know if I can replace a regular button in a simple list block with a form-block (open form button)? I basically want to go from the button to a form. (Lightbox sort of style). Thanks in advance for any suggestions.
  10. Site URL: https://www.spanishlanguagecentreuk.com/online-courses I would like some help with CCS code that will correctly size my site for mobile use, keeping all the buttons in the right places, as you can see it goes crazy with the mobile version.
  11. Site URL: https://www.nationaltab.com/ Hi all, Is it possible to create a code where Header 2 font on my website is slightly smaller but only on mobile? I don't want to change the font size on the desktop view of the site, but on mobile, it's too big and hyphenates many of my headers. I'm in Brine v7.0 so it's not possible to do this through the template, so I'm looking for a code. If anyone has any solutions, I'd greatly appreciate it! Thanks, Megan
  12. Site URL: http://uplan.io Hi everyone, I have been trying to make a number counter with a codeblock to show our page's visitors how many "app users" and "project made" we currently have. The problem I ran into is that when I put a background picture, for example a darkish blue, the number turns black all the time. I checked the coding and it says that it is white, but it displays black. Can someone please help with a code or another solution? Of course a mobile compatible would be great. I used a jquery number counter coding and I would be thankful for the help. Here is the coding: <h1>JQUERY NUMBER ANIMATION</h1> <h3>jQuery counter to count up to a target number</h3> <div class="wrapper"> <div class="counter col_fourth"> <i class="fa fa-code fa-2x"></i> <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth"> <i class="fa fa-coffee fa-2x"></i> <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth"> <i class="fa fa-lightbulb-o fa-2x"></i> <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> <div class="counter col_fourth end"> <i class="fa fa-bug fa-2x"></i> <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2> <p class="count-text ">SomeText GoesHere</p> </div> </div> <style> .col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /* Column Grids End */ .wrapper { width: 980px; margin: 30px auto; position: relative;} .counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;} .count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; } .fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> (function ($) { $.fn.countTo = function (options) { options = options || {}; return $(this).each(function () { // set options for current element var settings = $.extend({}, $.fn.countTo.defaults, { from: $(this).data('from'), to: $(this).data('to'), speed: $(this).data('speed'), refreshInterval: $(this).data('refresh-interval'), decimals: $(this).data('decimals') }, options); // how many times to update the value, and how much to increment the value on each update var loops = Math.ceil(settings.speed / settings.refreshInterval), increment = (settings.to - settings.from) / loops; // references & variables that will change with each update var self = this, $self = $(this), loopCount = 0, value = settings.from, data = $self.data('countTo') || {}; $self.data('countTo', data); // if an existing interval can be found, clear it first if (data.interval) { clearInterval(data.interval); } data.interval = setInterval(updateTimer, settings.refreshInterval); // initialize the element with the starting value render(value); function updateTimer() { value += increment; loopCount++; render(value); if (typeof(settings.onUpdate) == 'function') { settings.onUpdate.call(self, value); } if (loopCount >= loops) { // remove the interval $self.removeData('countTo'); clearInterval(data.interval); value = settings.to; if (typeof(settings.onComplete) == 'function') { settings.onComplete.call(self, value); } } } function render(value) { var formattedValue = settings.formatter.call(self, value, settings); $self.html(formattedValue); } }); }; $.fn.countTo.defaults = { from: 0, // the number the element should start at to: 0, // the number the element should end at speed: 1000, // how long it should take to count between the target numbers refreshInterval: 100, // how often the element should be updated decimals: 0, // the number of decimal places to show formatter: formatter, // handler for formatting the value before rendering onUpdate: null, // callback method for every time the element is updated onComplete: null // callback method for when the element finishes updating }; function formatter(value, settings) { return value.toFixed(settings.decimals); } }(jQuery)); jQuery(function ($) { // custom formatting example $('.count-number').data('countToOptions', { formatter: function (value, options) { return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); } }); // start all the timers $('.timer').each(count); function count(options) { var $this = $(this); options = $.extend({}, options || {}, $this.data('countToOptions') || {}); $this.countTo(options); } }); </script>
  13. Site URL: http://gabrielasilveira.squarespace.com Hi there, I'm trying to change the logo on my website when scrolling down, I've tried all css/javascript codes I could find around with no joy. If anyone has a workaround for that on 7.1 that would be much appreciated, password for the website is hello Thank you!
  14. Site URL: http://alphachallenge.co.nz Hi, I am trying to add some code to my site but it doesn't want to work. It does include a link to a website that it not mine. It is for an accomodation supplier that I am trying to promote. The code is <div id="search-widget_IO312PWQ"><script>!function(e,t,a,n,c,r){function s(t){e.console.log("[Guesty Embedded Widget]:",t)}var i,d,l,o,y,m,g,h,p,u;n&&(i=n,d=t.getElementsByTagName("head")[0],(l=t.createElement("link")).rel="stylesheet",l.type="text/css",l.href=i,l.media="all",d.appendChild(l)),o=function(){try{e[a].create(r).catch(function(e){s(e.message)})}catch(e){s(e.message)}},h=!1,y=c,m=function(){h||this.readyState&&"complete"!=this.readyState||(h=!0,o())},(g=t.createElement("script")).type="text/javascript",g.src=y,g.async="true",g.onload=g.onreadystatechange=m,p=g,(u=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,u)}(window,document,"GuestySearchBarWidget",https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.css,https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.js,{"siteUrl":"bookings.wanakaholidayhomes.co.nz"});</script></div> Any help would be greatly appreciated. Many thanks Kim
  15. I have used a code block to display an image and when the mouse hovers over it, a Gif will start playing. I want to make the entire code block/image/gif clickable to send me to another site. All the working codes I have found was a clickable text that shows up underneath the code block/image. Any suggestions?
  16. Site URL: https://dory-dolphin-pwl8.squarespace.com/config/help I followed this forum post to get the vase image to fly across the screen: Just wondering if anybody knows how to code it so that it only shows on the homepage?? Thanks a lot
  17. Site URL: https://www.diabeticexchangeusa.com/price-list Site URL: https://www.diabeticexchangeusa.com/price-list Any ideas how I can a "get a quote" feature on this page? It would be great if my customers can select their items, and the total be added up in the corner of the page or something.
  18. Site URL: http://www.hidearvirgule.com Hello guys, I'm from France, may I ask for your help: I want to make a page where I can generate some random words/ pictures clicking on a button. Is that possible with javascript, and if so, how can I incorporate it in Squarespace page ? Thank you so much for reading me, have a good night Flo
  19. Site URL: https://ttmspa.com Hello! I am hoping someone can help me with an issue that has appeared on my website for the past few months. When I attempt to edit a page, the mega menu appears and I can only edit the mega menu. Any page content beneath is blocked and does not respond to any mouse pointer movements. The current workaround is to remove the mega menu code, edit the page, and then re-insert the code. I have attached a video and screenshots showing the issue. I originally thought it was my web browser not displaying the editor properly, but the same behaviour exists on different browsers and operating systems. Below is the code for the mega menu. <script> $('.header-nav-folder-title[href^="/mega-"]').each(function() { var link = $(this).attr('href'); var idName = link.slice(6); $(this).parent().addClass('mega-menu'); $(this).parent().after('<div id='+idName+' class="mega-menu-item"></div>'); $('#'+idName).load('/mega-page-' + idName + ' #page',function(){ window.Squarespace.initializeLayoutBlocks(Y); }); }) </script> This issue first appeared a few months ago, and before then, page content was editable without the mega menu causing an issue. Any help would be greatly appreciated. Thank you! clip.mp4
  20. I have to add this: <!-- BEGIN GCR Opt-in Module Code --> <script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer> </script> <script> window.renderOptIn = function() { window.gapi.load('surveyoptin', function() { window.gapi.surveyoptin.render( { // REQUIRED "merchant_id": "MERCHANT_ID", "order_id": "ORDER_ID", "email": "CUSTOMER_EMAIL", "delivery_country": "COUNTRY_CODE", "estimated_delivery_date": "YYYY-MM-DD", // OPTIONAL "products":[{"gtin":"GTIN1"}, {"gtin":"GTIN2">}], "opt_in_style": "OPT_IN_STYLE" }); }); } </script> <!-- END GCR Opt-in Module Code --> To the confirmation page, but I'm missing dynamic values for the " "estimated_delivery_date" and gtin1 and gtin2. I figure order id one can use the tag squarespace provides {orderId} as well as email address. But I can't find other values anywhere, not even customer service knows. Can someone help me? I am trying to collect seller reviews and product reviews so I can show these badges on shopping ads from google ads. Has anyone done this or have they used a review aggregator? Or is there another service which will accomplish this? THanks! Amber
  21. Site URL: https://tambourine-apple-mx9f.squarespace.com/semc Hello! I've followed various bits of advice on here and got a video to auto play on a one of my site pages but in order for it to display properly on the desktop page I changed the width and height to values that are appropriate. This means that it displays absolutely huge on mobile and hangs off the edge of the screen. Is there some code I can use to adjust this and how can I stop this happening on other similar videos on other pages, when I upload them? Similarly I wanted to add a secondary logo in my footer which again displays huge on mobile. Is there a way to adjust this for mobile as the spacer modules don't display. Thanks in advance!
  22. Site URL: https://www.tommystips.com.au/store-services Hi SS trust, I'm trying to get the headings and price descriptions for all products to sit above the images on my product page: https://www.tommystips.com.au/store-services PW: SOME2021@ Any help would be much appreciated. Thanks! RAD.
  23. Site URL: https://esportsengine.gg/ Hi all! First time posting - I've tried to look up the answer on this, but haven't had any luck, so please let me know if this can be found elsewhere. Anyways, I was wondering if I can replicate the look/design by using Squarespace found on this website: https://esportsengine.gg/ Specifically I'm looking at the 1st section (after the top banner) that has a red tinted video on the left with the words "WE WIN WHEN YOU WIN" on the right. It appears that the left side is a video and the right is a text block. But, when scaling the browser size, the video maintains it's aspect ratio and stays locked to the bottom and top of the section. Additionally, the words don't cross over onto the video, but instead maintain their positioning on white. On mobile the words appear beneath the video. Is is something that is possible utilizing Squarespace? Any and all help is appreciated -- total coding newbie, so go easy on me, thank you!
  24. Hi all, I have recently registered with Klarna to offer pay later options in my Squarespace store. I haven't done my research prior, but was sure I will be able to somehow custom code Klarna payments into my store - I was wrong. I've put a job post up on people per hour and upwork, and received a few proposals from developers. Before continuing I thought I'd better check with Squarespace directly and I learnt it is not possible to integrate Klarna at all at this stage :( I was wondering whether anyone has found some workaround? I read there is Shopify cart integration way, but I don't really like it. I think it would be a very valuable feature for a lot of people up here if we could simply just integrate Klarna in similar way to Paypal and Stripe. This payment method would be very useful to me and most of the other shopping platforms already offer this integration.
  25. Site URL: https://tjr-new-site.squarespace.com/slider I’m looking to create an accordion / slider where each section expands on hover, as demonstrated in the gif mockup. I'm having trouble adapting the code snippets I'm finding to have the right animation, and formatting the content within each section (most I've seen use full background images with caption). The code I started with: https://www.cssscript.com/pure-css-horizontal-responsive-image-accordion-slider/ pw for my scary first attempt: troysitehelp I'd love anyone's input on how to "hack" this for squarespace—i.e. laying out content in SS editor, and adjusting the code to reference this, or if anyone would like to quote an estimate to build this.
  • Create New...