Search the Community

I've looked everywhere and I'm still not sure I understand how to take codepen code and add to squarespace. All I've seen is to just add a code block and put it all in the code block? I can get the html and css to work but soon as I try the Js it doesn't work. I was trying to test out this as a practice to try and figure it out. https://codepen.io/cameronknight/pen/qBNvrRQ on this page https://flugelhorn-seahorse-lzrb.squarespace.com/code-test-page?p?p pw: design123 I cant find any clear information on how to integrate codepen to squarespace. If anyone has straight forward instructions or youtube videos / links etc where I can research this more I'd appreciate it. I think I'm just not sure where each part gets placed into squarespace or when to change an id to something squarespace specific? I think I just need it really dumbed down.. lol

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!

Site URL: https://thefutur.com/brand-strategy-fundamentals#scroll-text1 Wondering if anyone knows how to pick this apart and create something similar in Squarespace. What is needed? Javascript, CSS, HTML Combination? Not even sure where to start, any thoughts would be helpful to get me started. I believe they built this in Webflow.1 Thank you, https://thefutur.com/brand-strategy-fundamentals#scroll-text1

Site URL: https://vincentgarreau.com/particles.js/#snow Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace It works on 7.0 but not on 7.1. What is needed to make it work on 7.1? <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { particlesJS("home", particlesJSConfig); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100); }); </script> <style> .particles-js-canvas-el { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1; } </style> <script> var particlesJSConfig = { "particles": { "number": { "value": 400, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 10, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "bottom", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 0.5 } }, "bubble": { "distance": 400, "size": 4, "duration": 0.3, "opacity": 1, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } </script> Kind regards, John

Site URL: http://www.allkings.org We had been successfully using the code shared here in this tutorial: https://www.launchthedamnthing.com/blog/use-parallax-in-squarespace-71 Until last weekend, we hadn't made any changes to the site and suddenly the parallax is off, and the layers are overlapping. I've disabled the script for now, but wondering if there may have been an update to 7.1 that would have changed things? We're still on that same version, and the tutorial is there to match it, but the problem is there.

Site URL: https://www.bitcoin-trend-trader.com/bttforum Hi Forum: I embedded the js code provided by Tradingview to generate a live Bitcoin chart. It is rendering at the very top of the page. Header menus and logo are obscuring the chart. I would like to move it down. I have pasted padding divs into the code but it continues to plot at the ver top. The chart works perfectly when I inject the js code into Page>Advanced>Code Header If I attempt to paste the same code into a <CODE> block that would allow me to add spacers to move it around, all I get when I save the page is the code text, not the functioning widget. Width and Height below are defining the chart size. I just need about 100 px above this script to move that chart down bellow the heading menus. Thanks Michael Here is the code with my attempt to add a spacer: <!-- TradingView Widget BEGIN --> <div { padding-top: 400px; padding-bottom: 10px; ></div> <div class="tradingview-widget-container"> <div id="tradingview_72cf8"></div> <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSDT/?exchange=BITBAY" rel="noopener" target="_blank"><span class="blue-text">BTCUSDT Chart</span></a> by TradingView</div> <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> <script type="text/javascript"> new TradingView.widget( { "width": 1400, "height": 700, "symbol": "BITBAY:BTCUSDT", "interval": "D", "timezone": "Etc/UTC", "theme": "dark", "style": "1", "locale": "en", "toolbar_bg": "#000000", "enable_publishing": false, "withdateranges": true, "hide_side_toolbar": false, "details": true, "calendar": true, "studies": [ "MoonPhases@tv-basicstudies", "MAExp@tv-basicstudies", "ZigZag@tv-basicstudies" ], "container_id": "tradingview_72cf8" } ); </script> </div> <!-- TradingView Widget END -->

Hi! I was wondering how to hide the close button on the promotional pop-up, and instead have the pop-up fadeout after 5 seconds? Thanks!

Site URL: https://www.robinburgess.com/ On this website, some of the pdfs open in new tabs, while some are being downloaded. This seems inconsistent to me, because I link all pdfs in markdown with <a href="/s/link-to-.pdf" target="_blank">Linktext</a> However, the behavior of the pdfs changes, seemingly randomly. For example, when clicking on "DEMAND FOR ELECTRICITY ON THE GLOBAL ELECTRIFICATION FRONTIER", the pdf opens in a new tab, but for "WHY DO PEOPLE STAY POOR?", it downloads. I'm using Google Chrome, but I want the behavior to be the same across all modern browsers. I have already tried to force this with a site-wide code injection, but it didn't work. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('a[href*="pdf"]').click(function(e) { e.preventDefault(); // stop the existing link from firing var documentUrl = $(this).attr("href"); // get the url of the pdf window.open(documentUrl, '_blank'); // open the pdf in a new window/tab }); </script>

Site URL: https://www.veteransthatdump.com/ Has anyone installed the CallTrackingMetrics tracking script using Code Injection and had it work? I see the script in the source code of the site but it is not sending info to CTM (according the CTM support) and SS isn't much help either. Mostly just trying to see if anyone else has been able to get it to work or might have an idea why it would not be working. Thanks in advance.

Hello, forum! I just trying to add one or more "menu" buttons to website. I've added button, but it's still doesn't work. How to new buttons work? And menu buttons Test 0,Test 1, Test 2 wokrs normally only on html & css without js Here are parts of html & css codes --- menu <div class="tab"> <input id="tab-0-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs <input id="tab-1-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs <input id="tab-2-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs <input id="tab-3-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs but it doesn't show id="tab-3" <div class="tab-nav"> <div class="nav" id="nav-0"> <label class="ctrl-label" for="tab-0-ctrl">Test 0</label> wokrs </div> <div class="nav" id="nav-1"> <label class="ctrl-label" for="tab-1-ctrl">Test 1</label> wokrs </div> <div class="nav" id="nav-2"> <label class="ctrl-label" for="tab-2-ctrl">Test 2</label> wokrs </div> <div class="nav" id="nav-3"> <label class="ctrl-label" for="tab-3-ctrl">Test 3</label> wokrs but it doesn't show id="tab-3" </div> </div> <div class="tab-container"> <div class="tab-container-block" id="tab-0" > works <ul class="grid-view" data-grid="vertical"> <h2>Test 0</h2> </ul> <h2>test main</h2> </div> <div class="tab-container-block" id="tab-1"> works <ul class="grid-view" data-grid="vertical"> <h2>Test 1</h2> </ul> </div> <div class="tab-container-block" id="tab-2"> works <h2>Test 2</h2> </div> <div class="tab-container-block" id="tab-3"> isn't shown <ul class="grid-view" data-grid="vertical"> <h2>Test3</h2> </ul> </div> </div> </div> menu --- --- css .tab { padding: 0 0 0 8px; width: 100%; } @media screen and (min-width: 1112px) { .tab { padding: 0 0 0 16px; } } .tab-nav { display: flex; margin-bottom: 10px; } .tab-nav > .nav { border-image-source: url(../images/announcement/tab_normal.png); border-image-slice: 24 fill; border-image-repeat: repeat; border-image-width: 12px; box-sizing: content-box; display: inline-block; height: 36px; line-height: 36px; padding: 0 9px; position: relative; color: #fff; font-size: 1rem; font-weight: 500; white-space: nowrap; width: 100%; flex: 1; text-align: center; } @media screen and (min-width: 1112px) { .tab-nav > .nav { height: 58px; line-height: 56px; } } .tab-nav > .nav:not(:last-child) { margin-right: 8px; } .tab-nav .ctrl-label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; cursor: pointer; margin: 0; } .tab-container { overflow: hidden; } .tab-container-block { display: none; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } .tab .ctrl-radios { display: none; } .tab #tab-0-ctrl:checked ~ .tab-container #tab-0 { display: block; } .tab #tab-1-ctrl:checked ~ .tab-container #tab-1 { display: block; } .tab #tab-2-ctrl:checked ~ .tab-container #tab-2 { display: block; } --- added .tab #tab-3-ctrl:checked ~ .tab-container #tab-3 { display: block; } added --- .tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 { border-image-source: url(../images/announcement/tab_active.png); } .tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 { border-image-source: url(../images/announcement/tab_active.png); } .tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 { border-image-source: url(../images/announcement/tab_active.png); } --- added .tab #tab-3-ctrl:checked ~ .tab-nav #nav-3 { border-image-source: url(../images/announcement/tab_active.png); } added --- css --- --- css original .tab { padding: 0 0 0 8px; width: 100%; } @media screen and (min-width: 1112px) { .tab { padding: 0 0 0 16px; } } .tab-nav { display: flex; margin-bottom: 10px; } .tab-nav > .nav { border-image-source: url(../images/announcement/tab_normal.png); border-image-slice: 24 fill; border-image-repeat: repeat; border-image-width: 12px; box-sizing: content-box; display: inline-block; height: 36px; line-height: 36px; padding: 0 9px; position: relative; color: #fff; font-size: 1rem; font-weight: 500; white-space: nowrap; width: 100%; flex: 1; text-align: center; } @media screen and (min-width: 1112px) { .tab-nav > .nav { height: 58px; line-height: 56px; } } .tab-nav > .nav:not(:last-child) { margin-right: 8px; } .tab-nav .ctrl-label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; cursor: pointer; margin: 0; } .tab-container { overflow: hidden; } .tab-container-block { display: none; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } .tab .ctrl-radios { display: none; } .tab #tab-0-ctrl:checked ~ .tab-container #tab-0 { display: block; } .tab #tab-1-ctrl:checked ~ .tab-container #tab-1 { display: block; } .tab #tab-2-ctrl:checked ~ .tab-container #tab-2 { display: block; } .tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 { border-image-source: url(../images/announcement/tab_active.png); } .tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 { border-image-source: url(../images/announcement/tab_active.png); } .tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 { border-image-source: url(../images/announcement/tab_active.png); } css original ---

Hi, I have 2 images overlay. I want to trigger a sound by clicking on the upper image (olaf.gif) I have sound on image but I lose all criteria: size olaf.gif, onClick and onMouseOut on 5.png. Thank you for your help. Voizins <script> function play(){ var audio = document.getElementById("audio"); audio.play(); } </script> <td align="center" valign="middle"><img src="Images/olaf.gif" value="PLAY" onclick="play()"> <audio id="audio" src="Sound/TOON.wav" ></audio> width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png' /></td>

Hi All, I would like to give the "reel slideshow" in 7.1 a draggable function so that also means getting rid of the transition effect. I have found a code on codepen, https://codepen.io/kellyex/pen/KKwwdYg >> anyone who knows how to integrate this? Would be amazing ! Thanks, K

Site URL: http://torchglow.video Hello, I am trying to add a second logo centered in my header like the attached mockup, but I can't quite figure it out. Page PW is T0rchgl0w The image path for the second logo iamge is https://static1.squarespace.com/static/6016ebcd5d14073e2249cdd0/t/6040178f0f70e01f9af5997b/1614813071300/Torchglow_Flame-Icon_White-Transparent.png Any help would be greatly appreciated!

Site URL: https://geckovacations.squarespace.com/ Password: 12345 on the Home Page there is some code for a property search widget. It doesn't show up when the site is live nor in edit mode in Squarespace 7.0 but works fine when I tested it on a 7.1 template. Attached is the error shown. Can anybody please tell me exactly what to do? I am not a coding expert.

Site URL: https://jayuzumi.com/test Hi if you press the share button and then click twitter for example it doesn't work and the pop up window doesn't show. I purchased this audio plugin and the developer doesn't know why it's not working and everything is implemented correctly, he did ask this though- Is it possible that the website has some feature that prevents the popup window to open? https://www.w3schools.com/jsref/met_win_open.asp I also have another site which it works perfectly on you can see the working player here but on a non Squarespace site. Can anyone help, this is the only feature which doesn't work.

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site: 1. "Making Stagger Reveal Animations for Text": https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 2. "Ideas for Distorted Link Effects on Menus": https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html 3. "Animated Custom Cursor Effects": https://tympanus.net/Development/AnimatedCustomCursor/index3.html 4. "Text Distortion Effects using Blotter.js": https://tympanus.net/Development/TextDistortionEffects/index.html It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me. One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. Is he correct? Is there a solution? Thanks for looking. Adam

Site URL: http://CookColorful.com We want to display or hide buttons and menus depending on whether or not the user is logged in with access to a member area. I'd love any insight the genius collective on here can provide. Thanks!

Site URL: https://www.abehsignatureapartments.com/ I am trying to upload custom code files (HTML, CSS, JS, Images). And I can't seem to find a way to do that. Apparently, developer mode (which I believed was a way to manage/transfer files) is only available in version 7.0 and not 7.1. I've tried using an FTP Client - Filezilla precisely - no luck there either. Can anyone help with this please?

Site URL: https://walrus-bellflower-k256.squarespace.com/ I've tried a number of ways. It seems the page loads fully on the initial render, as the scrollbar indicates, but I can only seem to get the height of the element that my JS code is inside of, and not the whole document itself. I'm building a scroll-progress-bar for a client and need to know how much of the document they've scrolled through. I thought I might be able to get the footer element and measure the distance from there, but that's also undefined. This was my latest attempt, using all the possible document.height attributes I could find haha, but still nothing: const body = document.body const html = document.documentElement const h = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ) still only returns 589, but the document scrolls to 4715

Site URL: https://whbc.squarespace.com Hello. I'm try to create a sort of age verification popup for a brewery website. I'm trying to make it work with the built-in promotional pop-up tool. So far, I created a pop-up with two buttons: "Enter Site" and "Order Takeout" The "Enter Site" button should close/dismiss the popup and show the visitor whatever page they've landed on. The "Order Takeout" button would take underage uses directly to the food menu to order, skipping all of our content about alcohol. For the "Enter Site" link I've tried both a "#" and leaving the link target blank. In both cases, clicking the button re-opens the current page in a new tab. Does anyone know of a way to make that "Enter Site" button simply close that pop-up modal? And, I guess, set whatever cookies are needed to hide the pop-up per the marketing settings. I feel like there's some simple Javascript somewhere to do it but I'm not skilled enough to figure it out.

Site URL: https://jordandixon.co Here my site: https://jordandixon.co The issue is on mobile. I'd like to lock the screen orientation to portrait. If you turn your phone sideways on my current mobile site it looks bad. Any tips on how to do this with Javascript? I know there is an API for this but I'm unsure how to integrate it within Squarespace. I would appreciate any insight at all if anyone has come up with a similar solution. Thanks in advance!

Hello, it’s my first question here. I have a customer, that want to add in the Squarespace website, a signup/login option, but, my customer need to develop an algorithm that match tutor with clients, based on some factors, like location, type of job and hours needed. It’s possible to make something like that? Thanks, Nicolò

Site URL: https://musgrove.co/ I'm having issues placing my mega menu (JS and CSS) close enough to the navigation link that it closes before I can hover over the page. I have built this by adding an additional section under my main footer, then added the following JS: <!-- Wedding Tab Megamenu JS--> <script> $(function(){ $('.header-display-desktop [href="/weddings"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)')) }); </script> <!-- End Wedding Tab Megamenu JS—> When I hover over the 'Weddings' navigation link, my page does open and displays correctly. However, when I move my mouse off the link, it disappears too quickly (unless I move really fast which is terrible for UX). I attempted to add a spacer and then move it up, but z-index is not working to have the mega menu appear behind the main menu (since they both have white background, this is OK). I want to have some top-padding anyway but need to have the mega-menu appear longer to they can get to all the other links. Here is my CSS: .header-display-desktop [href="/weddings"] + .header-nav-folder-content{ width:100vw; right:0vw !important; left:0vw !important; transition: opacity .6s linear; a {background-image:none !important;} position:fixed; top:7%; box-sizing:border-box; padding:5px; border-bottom:2px solid #003d0f; box-shadow:0px 3px 3px #003d0f; .header-nav-folder-item{ display:none; } a{ display:inline !important; } .sqs-block-button-element{ display:inline-block !important; padding: 1em 1.6em !important; } } Is there a way to keep the mega-open just a fraction of a second longer so people can easily move their cursor to the mega-menu? (Sorry the website is still in "staging" so it is not active to inspect) I have been trying to figure this out for three hours and I'm throwing in the towel. HELP!!! Eric

Hi everybody, Hope you're well. I have a question regarding my attempt to get a "Back to top" button. I have followed all the advice listed from the top rated post (HammaadM) here: https://forum.squarespace.com/topic/10886-how-can-i-add-a-scroll-to-top-button/ This means A) I have added a code block in my footer with code: <a href="#" class="scrollup">Scroll</a> B) I have added to custom CSS the following code (the URL is the Back to Top button I'd like to use): .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url('https://i.ibb.co/m6SvsMy/Back-to-top-icon.png') no-repeat; } C) I have added to the Header the following JS: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function () { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> However, I'm not seeing the Back to Top button working at all on my site (which is currently Private and in Preview mode). I wondered if anyone had experienced similar or had any ideas why this isn't working? I can't see anything at the moment - nothing in the Footer, and certainly no image that appears as the site is being scrolled which is what I was hoping to achieve. Thanks very much in advance for any help you can provide.

Site URL: https://lifejoytherapy.com/faqs Is there anyone who can help diagnose why the following code block isn't rendering?? See screen shot - this is how I've added it to the site. Plan is a Business Plan so should cover JS. I so hope someone can hep! Thank you so much!