Jump to content

Search the Community

Showing results for tags 'jquery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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


  • Events Calendar

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://seal-reindeer-3la9.squarespace.com/contact Hello! For layout purposes, I chose to hide the captions "First name" and "Last name" on the lightbox form. Since I hid those, I would like to add placeholder texts for those fields as "First" and "Last" respectively. Would this be with jQuery? I attempted and failed because I could not figure out how to target these fields... Any advice would be much appreciated. Thank you so much for your time! pw: sqspcontacttest
  2. Hi all! I'm using this code https://codepen.io/jhawes/pen/PPeBOp to create a tabbed content block to show my different services. I've added the HTML and JS as code block and I've put the CSS into my Custom CSS. I've also put JQuery code into my header using Code Injection. I've been having a good go at this for a few days but come across two things I can't seem to fix and wondering if anyone would kindly be able to help. When I paste the unedited HTML in, the side navigation links didn't look like JHawes. Firstly they showed as bullet list, so I took away the 'li' tags and made them divs. The side navigation was also not highlighted the way it is in JHawes code. Taking away the li tags did give the text a highlight but it is just around the word and not the full width of the side tab as it shows in his code. Anyone know how to do this? I'm still in a Squarespace trial but when I preview the site the first link (Half day) seems to work as it jumps the page to the top of that section, however, when I click on the others 'full access' 'power hour' etc, they don't work. So grateful to anyone that can advise. https://squid-raccoon-pxc9.squarespace.com/ password: cr3ate
  3. Site URL: https://www.ditbaderum.dk/ Hi guys, So I created 4 anchor links in my header navigation. I want the nav link that is "active" to get an icon under. So when you scroll to the anchor point or click the nav links it gets an active icon. Is this possible? Password to site is Kris123
  4. Hello, I am building a single page website where I have added a custom navigation to the top with anchor links that make the page scroll to their specific section. Everything works fine except the third and last link, supposed to send you to the contact form, last section before the footer. When clicked it scrolls to the wrong place, on a section before the correct one. It goes to the right spot just on the second click. I have tried with 3 different coding solutions, all involving jQuery and they all behave the same way. Any idea why this could be happening? Thanks ๐Ÿ™‚
  5. 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 --->
  6. Site URL: https://parrot-hibiscus-33rc.squarespace.com Hi Folks, pw: homack101 I'm used a bit of code I found on here to prepend my blog pages with a "back to" link. However my site is going to be using multiple blogs, and I need the "back to" links to be different on them both. One is going back to a people section and one is for an actual blog. https://parrot-hibiscus-33rc.squarespace.com/people/blog-post-title-one-nnsty-hd5zl on this section I've got it working fine, however for this section, https://parrot-hibiscus-33rc.squarespace.com/blog/blog-post-title-one-238h5 I want it to say "Back to Insights" this is the code I am using... <script> jQuery(document).ready(function($) { $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><p class="sqsrte-small preFade fadeIn"><a href="/" class="sqs-block-">โ† Back to People</a></p></div></div></section>').insertBefore(".blog-item-top-wrapper"); }); </script> Is it possible to alter this so that it relates to the specific URLs, rather than just all blogs on the site? thanks! Laura
  7. 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; }
  8. Site URL: https://thehouseofagness.squarespace.com/ Hi, I am new to this and I am using 7.0 brine template. I would like to move the Contact us link beside the shopping cart, how can I do this? Right now the link is on the secondary nav menu. pass: 220821 Thanks ๐Ÿ™‚
  9. Site URL: https://lifelab.world/en/home Hi all! May I please ask for help regarding translating the calendar dates and months? I followed bradgood tutorial in creating a multilingual website. I am on a SS7.0 business plan using Brine- Impact template. I have been searching some solutions here, however I am stuck. ๐Ÿ˜ž Thank you kind people of Squarespace. ๐Ÿ™
  10. Site URL: https://www.graemefordham.com/motion Hi, There a line of text on the end screen after the video plays that says 'more from Graeme Fordham' that I would like to stop appearing. Vimeo themselves don't offer a solution to remove it and it ultimately takes people away from my site, which I don't want. Is there a way to css or jquery it away? The other features of my chosen end screen are great...just this one is a problem. To see the video in question, head to the link above 'motion' and click on the 2nd video down, then you can scrub to the end to see the end screen in question. I would be very happy for a solution. Thanks, Graeme
  11. Site URL: https://www.maximpactslideshows.com Using jquery selectors worked perfect on Squarespace form blocks but I want to add date placeholders to a product form lightbox. Neither options below worked correctly for me. Select the Photo Count, Title, and Add to Cart, then the Form asking for the date will popup as a lightbox (I wish to add MM DD YYYY) to the product form's date section.
  12. Site URL: https://tangerine-flamingo-d2gk.squarespace.com/ site: https://tangerine-flamingo-d2gk.squarespace.com/ pw: wax Hey all! I'm using this bit of jquery for a custom cursor and on it's own it works great <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> but I believe the function that gets the cursor position is interfering with the CSS Snap Scroll //snap scroll homepage #collection-62d56566e4713f4e4c93ab33 .page-section { scroll-snap-align: start; } that I'm using on the site as well. When you move the mouse while the viewport is moving everything jumps around and gets jittery. I'm not sure if there's a better way to get the mouse position or if I'm totally off base but any help would be appreciated. Thanks!
  13. Hello! I'm relatively new to Squarespace and/also a designer and/also an engineer. I'm putting together my portfolio website at the moment. I was considering the possibility of adding a frame-by-frame style moving image that would 'play' during scroll. You know the type of animation โ€” I believe Apple made it popular on their site with the now canonical airpods animation. See for example: https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2 My question is this to the experts out there: is this possible using the code injection features of Squarespace? If so, how might I go about commissioning someone to add this capability to my Squarespace site such that I could then use it in various places? I'm asking this way rather than my normal inclination which would be to spend lots of time exploring and trying as I'm trying my level best to prioritize how I use my time. It may be that it makes more sense to have an expert do it than me learning how, as much as that would be my normal way about things. Julian
  14. Hello! I'm currently using an age gateway plugin purchased from a third party website with limited customisable features. To ensure my website is compliant I need to have hyperlinks within the pop up directing visitors to the T&Cs and Privacy Policy pages. E.G: "...you confirm that you are over 18 years old and have read, understood, and accepted our Terms and Conditions". Is this possible to do in the header/footer code injection of Squarespace, I have tried using href and <a/> coding but it just adds it as plain text with no clickable link. SOLUTIONS: Any suggestions on how else I could add an age verification pop-up with clickable hyperlinks in the paragraph would be amazing! Alternatively, I would be open to hiring a dev to create this as needed. Thank you!
  15. Site URL: https://echd-v2.squarespace.com/ Hi all I'm nearly finished developing this website, but the client has one final tricky request: I need to add a call icon to the header button https://echd-v2.squarespace.com/ password: echd I read recently that the old font awesome hacks/loopholes I used to achieve these things with has been closed, and that Jquery is the only way now This is a bit outside my comfort zone โ€“ is anyone able to point me in the right direction? Thanks James
  16. Hello, I'm hoping that someone out there may be able to assist me with getting this configured and working properly. I have a form with a couple of form fields that I have hidden and are coded to only appear based on certain answers from the previous question. For example: "Lifetime Member?" Yes = No Follow Up No = Follow Up My problem is that all of the information that we are asking requires an answer. I have Jquery installed and running but if I leave the required tag on the hidden fields then people will not be able to submit their answers. So I need to remove the required field from Squarespace but keep it required through Javascript and Jquery only if the questions are showing, if not then they would not be required and folks could submit their answers. I'm not sure if what I am trying to do is possible giving the limitations, but I'm hoping that someone out there may be able to assist me. Below is a copy of the code that I am using: <script> $('#radio-yui_3_17_2_1_1618750827688_273431 input').click(function() { selection = $(this).val(); if (selection == 'No') { $('#date-yui_3_17_2_1_1618750827688_222457').show(); } else { $('#date-yui_3_17_2_1_1618750827688_222457').hide(); } }); $('#radio-yui_3_17_2_1_1618755633959_63568 input').click(function() { selection = $(this).val(); if (selection == 'Yes') { $('#date-yui_3_17_2_1_1618755633959_64259').show(); } else { $('#date-yui_3_17_2_1_1618755633959_64259').hide(); } }); </script>
  17. Site URL: https://dachshund-apricot-e6ab.squarespace.com/ Hi Guys! I am trying to load a page's content into another page's specific div. The content is loading perfectly only trouble is that the image and videos are not appearing. PASSWORD:1234 Target Page (on which the content has to be displayed): Target Page 2 โ€” Overbound (squarespace.com) Source Page (whose content has to be displayed): Source Page 2 โ€” Overbound (squarespace.com) My Code: <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("#collection-62925dc5a8b48b3bc07393bd section[data-section-id=62925dc5a8b48b3bc07393bf]").load("https://dachshund-apricot-e6ab.squarespace.com/source-page-2 #page"); }); </script> What could be the solution? Thanks in advance
  18. Site URL: https://www.joaohenriqueviegas.com/somewhere-between-altair-and-vega I had this code block working sometime ago but now I've noticed it no longer works. To test it, I tried pasting the code on Codepen and voillรก, it does still work: https://codepen.io/joaohenriqueviegas/pen/yLvjvOE the link for the website is: https://www.joaohenriqueviegas.com/somewhere-between-altair-and-vega <style> #Play { background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c415291aa5a30cb12af43/1618755922141/011PlayPauseIcon.png); background-size: contain; } #plus { background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c4155a79f9205b0d698c0/1618755925449/011RightIcon.png); background-size: contain; } #minus { background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c414b201c4c76efea22c1/1618755915497/011LeftIcon.png); background-size: contain; } #slide { position: relative; margin-left: 10%; height: 0px; width: 80%; border: none; background-image: url("Gallery Hall.png"); } #slide .ui-slider-handle { width: 8%; height: 80px; position: absolute; margin-left: -4%; margin-top: 9.5%; background-position: top center; background-color: transparent; border: none; background-image: url(https://static1.squarespace.com/static/6060cfdbe8d1a946177222ab/t/6078b4567432e03ebb9d08f5/1618523222893/011Artboard+1_DE+42.png); background-size: contain; } #Buttons { } .button { border: none; background-color: transparent; width: 40px; height: 40px; margin: 20px 10px; cursor: pointer; } #first_player { background: transparent; width: 100%; padding-bottom: 27.1%; background-image: url(https://static1.squarespace.com/static/6060cfdbe8d1a946177222ab/t/6078b113156d863f2eb9bf75/1618522387737/Gallery+Hall.png); background-repeat: no-repeat; background-size: contain; } </style> <div id="first_player"> <div id="slide"> </div> </div> <div id="second_player"></div> <div id="Buttons"> <button onclick="down()" class="button" id="minus" type="button"></button> <button onclick="play_pause()" class="button" type="button" id="Play"></button> <button onclick="up()" class="button" id="plus" type="button"></button> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> var playing = 1; function play_pause() { if (playing) { playAudio(1); playAudio(0); } else { song1.pause(); song2.pause(); } playing ^= 1; } function up() { var val = $("#slide").slider("values", 0); if (val <= 90) { $("#slide").slider("value", val + 10); setVolume((val + 10) / 100); } } function down() { var val = $("#slide").slider("values", 0); if (val >= 10) { $("#slide").slider("value", val - 10); setVolume((val - 10) / 100); } } if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ) { // true for mobile device console.log("mobile"); var fileref = document.createElement("link"); var filename = "slider_mobile.css"; fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); } else { // false for not mobile device var fileref = document.createElement("link"); var filename = "slider_desktop.css"; fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); } var song1 = new Audio(""); var song2 = new Audio(""); song1.volume = 0; song2.volume = 1; $(document).ready(function () { var play = false; $("#slide").slider({ min: 0, max: 100, value: 0, animate: true, range: "min", slide: function (event, ui) { setVolume(ui.value / 100); } }); $("#first_player").append(song1); $("#second_player").append(song2); song2.id = "song2"; song1.id = "song1"; }); function playAudio(type) { var mediaExt = song1.canPlayType("audio/mp3") ? ".mp3" : song1.canPlayType("audio/ogg") ? ".ogg" : ""; //Firefox nao suporta mp3 if (type == 1) { song1.src = "https://github.com/joaohenriqueviegas/Somewherebetweenaltarandvega/blob/main/Altar" + mediaExt + "?raw=true"; song1.setAttribute("loop", "loop"); song1.play(); } else { song2.src = "https://github.com/joaohenriqueviegas/Somewherebetweenaltarandvega/blob/main/Vega" + mediaExt + "?raw=true"; song2.setAttribute("loop", "loop"); song2.play(); } } function setVolume(myVolume) { var song1 = document.getElementById("song1"); var song2 = document.getElementById("song2"); song1.volume = myVolume; song2.volume = 1 - myVolume; } </script> Basically the code block should have a drawing of a person that we can drag to control the volume of two audio sources. the arrows should also control that slider on the phone. Right now the person doesn't appear at all and the arrows don't seem to work either. I am using jquery but my cousin coded the javascript for me. I tried moving the script links to the header with code injection but that didn't help. I'd appreciate any assistance. Thank you very much, Joรฃo
  19. Please see Text Block Text Class Add. This code was inspired by a member query as to a tab effect. Although this isn't a specific solution to their query. It is code that is a base effect, code which from to build other effects. I do show a rudimentary CSS tab effect using this base code. text block text class add with tabs example.mp4 What the code is doing is adding classes, based on the clicked tab labels, higher up the chain so that CSS can then manipulate elements involved. This code may have an advantage to some other solutions as might be found elsewhere on the web. It uses native blocks instead of code in code blocks or other methods to maintain the text bits. Well it does require one code block to indicate to the code the text to be used as classes. ๐Ÿ™‚ But overall it might be easier to maintain. It does take a good understanding of CSS to get set up.
  20. Site URL: https://disc-tangerine-2xzy.squarespace.com/ Hi all, In March I was approached by a potential client who sold cakes via a Squarespace website and wanted to set up a means for customers to schedule to pick up their orders. I did a ton of research and figured out code which embedded a scheduling iframe on the cart page only (huge shout outs to @codeandtonic, @creedon, @paul2009 and others whose answers on various Squarespace Forum helped me work out the code). Everything worked perfectly until 2 days ago when the scheduling iframe suddenly disappeared. I've gone in and I think the reason for it disappearing was Squarespace's 'New Client Scheduling Page' activating, but I've reverted it back to the original and I still can't work out how to get the iframe back. My final working code was: <!---jquery---> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!---acuity---> <script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script> <!---START scheduling WORKING---> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', init); window.addEventListener('mercury:load', init); function init(){ jQuery.noConflict()(function ($) { window.Squarespace.onInitialize(Y, function(){ // cart page condition if(window.location.pathname.startsWith("/cart")){ // acuity iframe var acuityIframe = '<div id="spacer-before-acuity"></div><h3 class="cart-title">CHOOSE PICKUP TIME</h3><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=19092763"title="Pick Up Order" width="100%" height=540" frameBorder="0"></iframe>'; // iframe after cart container $(acuityIframe).insertAfter(".cart-container"); } window.onload=init; }); }); } </script> <!---END scheduling WORKING---> I'm quite lost on what to do now. Firefox is currently sometimes showing the iframe, but not reliably, and it took ages to work out the right code without disabling Ajax previously. If anyone has any insight, it would be so appreciated! Thank you! Password: hello
  21. It can be a challenge to get CSS going to customize a blog category page. The following cited code adds the category as an attribute to the body tag. Please see Blog Category Page Category Attribute Add.
  22. Site URL: http://musicwithmichal.squarespace.com/cats-and-dogs I am trying to hide the audio bar section and then using jQuery make it appear and play when you click "Play Song". This is my code: <script> $("div.play").click(function(){ $("section[data-section-id="627ad5fa2e230d27b113ece9"]").css('display','block'); }); </script> I would also like it to start playing the song when that div.play is clicked. Can someone please help?
  23. Site URL: https://www.susanchalkermassage.com/ Hi Circle, I want to make my whole summary item div clickable. You'll see on the website its the summary items under modalities. (summery item png attached) I have tried the following <script> Y.on('domready', function(){ Y.one('.sqs-block-summary-v2 .summary-item').on('click', function(e){ window.location = $(this).find("a").attr("href"); return false; }); </script> and this $(".summary-item").click(function() { window.location = $(this).find("a").attr("href"); return false; }); nothing is happening! Thanks for reading.
  24. Site URL: https://pigeon-eagle-lfzb.squarespace.com/store-1/p/style-01-hs2wj-rec4m-3dpak Password = 123 Hi, When I try to change the value set in a select element using jQuery the value does not display on the screen, the selected attribute is added in HTML and when clicking on the dropdown the correct value is highlighted. This is what displays: This is what I am expecting: The correct value is highlighted when clicking on the dropdown: I have the following code which is not working on the Squarespace site: <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> $(document).ready(function() { $('select[data-variant-option-name=Color] option[value=Purple]').attr('selected', 'selected'); }); </script> I've copied the except HTML and jQuery into jsfiddle and it seems to work there: http://jsfiddle.net/qaft4ve0/1/ I have also tried using .val and .props but this does not fix it. Updates: I have since tried adding a dropdown box on the home page and this works correctly so there must be something on the product page which is causing the issue. I have a few more updates on this (Still not working): Ive manaaged to get the dropbown box to visually update by setting the data-text attribute: $("div.variant-select-wrapper.color-wrapper").attr("data-text", "white"); Looking at the HTML code I have noticed the following: data-unselected-options="["Color","Size"]" This does not change when using jQuery, it only changes when I manually click on a dropdown box and select it. There is also a new attribute data-selected-variant that gets added when both colour and size are selected: data-selected-variant="{"attributes":{"Size":"M","Color":"White"},"optionValues":[ {"optionName":"Size","value":"M"},{"optionName":"Color","value":"White"}], "id":"ae248023-a7b2-4ebb-89ef-55764797f7e1","sku":"SQ2275958","price":4000, "salePrice":0,"priceMoney":{"currency":"GBP","value":"40.00"}, "salePriceMoney":{"currency":"GBP","value":"0.00"},"onSale":false,"unlimited":true, "qtyInStock":0,"width":0,"height":0,"weight":0,"imageIds":[],"images":[],"len":0}" and also: data-variant-in-stock="true"
  25. Please see Elements Replace. This is a base effect and gives you the ability to replace one selector with another. You might use it for an effect like moving a common block from the footer to particular pages.
  • Create New...

Squarespace Webinars

Free online sessions where youโ€™ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.