Search the Community

Hi all, I'm working on a website for an Amsterdam based real estate agent who would like to show real time reviews from an external housing platform on the website. The code I got from the platform is this: <script type="text/javascript" src="https://www.funda.nl/js/ifcom.js"></script> <script type="text/javascript"> // Initialize cross-iframe communication var ifcom = new IFCom('host', false); // Initialize frame ZoekWidget.init('https://www.funda.nl/beoordelingenwidget/61016/1/3=86A3AA;6=63/Verkoop'); </script> The widget should be shown at this page https://www.her-makelaardij.nl/beoordelingen in the black section between the three logo's (Funda, Google, Makelaar) and the pictures. Is it possible to put this on the website and if yes, what's the best way to do it? I don't have any experience with this. Thanks in advance! Alexandra Ps. Attached a screenshot of the actual platform page

Site URL: https://www.ssteart.com I have created a back to top button on my site using this code: While it works great in pretty much every way I found that when moving to another page the button is already there as soon as the new page loads (it should appear while scrolling down). If I start scrolling down and then up it starts behaving normally, but I would like to fix it so that when loading a page the button doesn't show up unless I scroll down a bit. Would that be possible? Thank you.

Site URL: https://www.kevinwalton.ca Hi, I was wondering if someone can help me work Butter.js on my site. I have tried everything I can but I can't do it. Here is the link to the Js: https://www.cssscript.com/smooth-momentum-scrolling-butter/ Thanks, Kevin W

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! ❤️ ❤️

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.

Site URL: https://www.smore.com/clippy-js Hi there - Can someone please give me a hand adding this to my site: https://www.smore.com/clippy-js. I'm looking for the 'Clippy' version to be added so when users first visit they are greeted with it - and then on every page after also. I am using Squarespace v7.1. Thanks!

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!

Site URL: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Page Link: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Password: SquarespaceDemoHelp! Hi, So I have been working on making my navigation change colour based on what the current visible page content background colour is. Surprisingly, I did manage to get it working for the most part, but I am having a few issues I am hoping to get help with. Problem/Goals 1. When the navigation reaches the first trigger, it changes as it should. However, when it reaches another area below that matches the same criteria, it does nothing. I would like to find a way to make the intersectional observer trigger on multiple sections, and ideally I want to be able to reorder sections and not have any issues. 2. When the navigation changes to black, and the menu is activated via the burger and then closed, the navigation returns to the original colour. I would like to keep the navigation colour the same after the menu is closed. 3. When the menu is opened, it only takes one colour theme. I would like the observer to change the menu overlay as well as the nav colour. This isn't as important as the other two. Here is the code I am currently using: <script> const sectionOne = document.querySelector(".black-section"); const sectionOneOptions = { rootMargin: '0px', threshold: .6 }; let prevYPosition = 0 let direction = 'up' const sectionOneObserver = new IntersectionObserver(function( entries, sectionOneObserver ) { entries.forEach(entry => { if (!entry.isIntersecting) { header.classList.add("white") } else { header.classList.remove("white") } }); }, sectionOneOptions); sectionOneObserver.observe(sectionOne); </script>

Site URL: https://www.ome.design Hello all. I've seen a few threads regarding this sort of subject already, and that often the conclusion is that there's nought to be done regarding the slow loading times related to 'unused javascript' on SS sites. Just as a preface, I'm a noob when it comes to coding so forgive my ignorance. Now, when assessing my site's speed on PageInsights (and various other tools), unused javascript files are cited as my main issue. Diving into this deeper, I see there are a bunch of facebook javascript files that seem to be slowing down my website??? Now, I have taken away my FB pixel.. and besides that I can't really imagine what's happening to cause this. Is it because I've social sharing icons and links to FB? Do FB links somehow insert their own javascript that could slow my website? (again, noob) These are the links provided by Google when referencing the unused java files: https://www.facebook.com/rsrc.php/v3/yR/r/zhfi1Uz36LI.js?_nc_x=Ij3Wp8lg5Kzhttps://www.facebook.com/rsrc.php/v3i7244/yK/l/en_GB/VptwldEJoUK.js?_nc_x=Ij3Wp8lg5Kz https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js https://www.facebook.com/rsrc.php/v3/y8/r/iCh0DOEOa3B.js?_nc_x=Ij3Wp8lg5Kz https://www.facebook.com/rsrc.php/v3/yp/r/xkDDtbnRaGa.js?_nc_x=Ij3Wp8lg5Kz https://www.facebook.com/rsrc.php/v3/ya/r/qAy9zK9-1J6.js?_nc_x=Ij3Wp8lg5Kz https://www.facebook.com/rsrc.php/v3iyOI4/yT/l/en_GB/UEpn9DfESuo.js?_nc_x=Ij3Wp8lg5Kz https://www.facebook.com/rsrc.php/v3iEpO4/ym/l/en_US/9JZFuMYprNT.js?_nc_x=Ij3Wp8lg5Kz https://www.facebook.com/rsrc.php/v3iRBQ4/y9/l/en_GB/jUUf_meG9yB.js?_nc_x=Ij3Wp8lg5Kz Any help would be most appreciated.

Site URL: https://www.ssteart.com/presets/p/essential-preset-pack-by-ssteart I would like to remove the scrollbar that appears next to the previews in a product slideshow. Right now I have used this code on the product page, though that also removes the main page scrollbar. Is there a way to specifically target the product item?

Site URL: https://lily-oboe-g479.squarespace.com/ Password is "1" Hi, I have no idea how to install Rolly.js to my site. I want to have smooth scrolling but I know nothing of javascript. Here is the website where you install it: https://rolly.maj.digital/ Here is where you install it: https://mickaelchanrion.github.io/rolly/guide/ Someone please help me Thanks, - Kevin

Site URL: https://energymanagementsolutions.com/ Hello All. I have website that giving me a few issues. I have a header wider several subcategories. For some reasons, the subcategories do not stay still for me to try and click on them. Could someone please help

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

Hello. I'm trying to have my intro text on my homepage be able to auto translate to Farsi every 5 seconds. My intro: Hello! I’m Name, a user experience researcher. Check me out below. The translate: سلام! من شان هستم ، یک محقق تجربه کاربر. در زیر من را بررسی کنید I'd like these to swap automatically in a fade transition every 5 seconds. What would my CSS look like? For reference, I've attached an image. Thanks!

Site URL: https://stolperstone.com/ I have an odd question related to disabling my mobile site for one of my webpages, or by forcing the desktop site in Squarespace. I have an iframe on my site that needs to run as a desktop webpage in order to function properly, and when I access it on mobile, the element does not function as intended. Essentially I'm trying to find a way to "Request Desktop Site" automatically. I know I can go into my browser settings and turn this on manually, but I need it to be something that is automatic. I'm thinking this could be done with a Javascript, or by spoofing the user-agent, but I'm not really sure how to go about this. Also, please note that this is not simply a viewport issue.

Hello! I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them. For example, on this blog page: https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this. Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed. Thanks in advance!

Site URL: http://www.sethgoodfellow.com/ Hi, I would like to add a looping typewriter typing effect that loops through a series of lines of text. A blinking cursor spelling out a line of text, deleting back over it, then typing the next line in a series. the password to my site: password example: https://www.innovativeink.ca/ I have found several forum queries that had some solutions on here already, but they do not seem to be working for Squarespace 7.1 which is what I am using to build this site. Does anyone know of a plugin for sale that offers this already coded with instructions for installation and modification? Thanks in advance!

Site URL: https://emu-orange-ea7f.squarespace.com/impact I'm trying to create an animated number counter. I've found some code on this forum (see below). It's working fine on desktop but isn't loading on mobile. It appears to be correctly written for ajax so I'm at a loss as to why it isn't working. Can anyone help? <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).load(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $(this).format({format:"#,###", locale:"uk"}); $this.text(this.countNum); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="30000" data-desc="Young people">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="80000" data-desc="Problems">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="250000" data-desc="Solutions">0</div> </div>

How can I make an arrow responsive to the text before and after the arrow. Looking at the attached image, the text is left justified and right justified and I would like the arrow in between to be a responsive width.

I made a code in processing thats java. I'm having problems finding any resources or tutorials on how to put it into my site. If its even possible. I go into "Pages" > "Page Settings" > "Advanced" inject code here. It doesn't work. The code itself just shows up on the page. Another thing is that this code basically uses the mouse to control an image. So the image needs to be uploaded as well. Could I put my Java code into CSS? Again this is Java, not JavaScript. Any help would be appreciated. See code below. PImage img; void setup() { size(1440, 810); img = loadImage("test4.jpg"); img.resize (1440, 810); } void draw() { background(#FCEAEA); fill(0); noStroke(); float tiles = mouseX/2; float tileSize = width/tiles; translate(tileSize/2, tileSize/2); for (int x = 0; x < tiles; x++) { for (int y = 0; y < tiles; y++) { color c = img.get(int(x*tileSize), int(y*tileSize)); float size = map(brightness(c), 255, 0, 0, 3); ellipse(x*tileSize, y*tileSize, size, size); } } }

Hi, I'm attempting to install TypeIt (https://typeitjs.com/) onto my site. After putting the java on my site, I've hit a road block. How do you put the necessary code onto you site? What block do you use? This is the code given: new TypeIt("#element", { strings: "This is my string!", speed: 75, loop: true }).go();

I'd like to diable the announment bar javascrip on mobile to increase the loading speed. I know how to do it with css (display:none). But it does not stop the script acutally.

Site URL: https://johnetterleebooks.com/ Does anyone know how I can make my header like the one in this website and do a video background? https://stevenkonkoly.com/

Hello, I would like to edit the following Javascript code to start automatically, when somebody lands on my page. The code is for a simple counter from https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace. Unfortunately this question has not yet been answered there. Maybe you can help?