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

Search the Community

Showing results for tags 'jquery'.

  • 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
    • 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

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://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
  2. 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.
  3. 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?
  4. 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.
  5. 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"
  6. 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.
  7. 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.
  8. Site URL: https://projectav-demo.squarespace.com/ Hey Guys Hope you're well. I'm trying to add some jquery animation effects to the summary sections of my site. The images on this section are being pulled through from my case studies blog posts. I can target the summary block id fine but I need to target the individual image element that site within it. I'd like to create some hover effects over the images. Does anyone know how I would target these image elements? Thanks Simon
  9. Site URL: https://www.seanhoyt.com/giftshop/magnolia-pillows Hello programmers, In the commerce settings, I can add variant columns for things like shirt colors, shirt size, etc. I'm attempting to make "color" easier to choose for the visitor by reading the colors and representing them as colored, selectable boxes below the drop-down selector. I have most of it working except for the trigger to change the variant image. Using jQuery to: read the Select options (done) make squares, style them with the color (done) add links to the color squares that change the select option and select text (done) change the color square focus based on the normal option selections (done) trigger the variant image change (I'M STUCK HERE) What triggers the listener that fades in the correct variant image? I can confirm that the 'data-text' are changing to the correct color names. https://www.seanhoyt.com/giftshop/magnolia-pillows Thanks all! Sean Screen Recording 2020-05-04 at 1.53.08 PM.mov
  10. 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 🙂
  11. I started a new thread here for the following post. Although it is related. It is a different question.
  12. Site URL: https://ngapsms.com Hey All! I'm struggling with the following code: <!-- <style> .sqs-cookie-banner-v2.DARK { display: none; } </style> --> <script> //check if running gonative if (navigator.userAgent.indexOf('gonative') > -1) { //hide cookie banner $(".sqs-cookie-banner-v2.DARK").hide(); console.log("yes gonative"); } else { //show cookie banner $('.sqs-cookie-banner-v2.DARK').show(); console.log($('.sqs-cookie-banner-v2.DARK').attr('style')); console.log("no gonative"); } </script> I've loaded 3.6.0 jQuery and I'm loading this code in the footer of my site. What I find is that the jQuery selector on class' doesn't seem to work. I can select all p's or h2's tags and it works great, but using class' fails consistently. Also, the commented style does work, so it makes me feel like the class is correct. Should this work, or is there something that I'm missing?
  13. Site URL: https://cone-raccoon-plbt.squarespace.com/config/settings/advanced/code-injection I just want to have the register's be able to click "yes" in the checkbox and additional fields pop up to add more people with their information, and when "yes" is deselected, the information that was added disappears. If they click "no" then nothing happens. Currently, the "yes" adds the information, but when you deselect, nothing happens. When "no" is checked, the entire form disappears. I need help.... <style> #name-6a41b18c-53ef-4e09-a7e1-36a8a44d66ae, #email-ef3069e6-ed8d-485b-8122-415adba6e0b2, #phone-683a6bf2-d5c5-4f67-a80c-bf1514902460, #text-68e3fadc-13a1-4f5e-872d-cc617f41fdb3, #checkbox-9c352e37-6923-40d9-a177-d01ee9efdb96, #checkbox-0f847181-fa76-4ea2-9b47-31b148155a9d { display: none; } </style> src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $('#checkbox-731a364b-ad8f-4d92-b3a7-c3fe55fddcae input').click(function() { selection = $(this).val(); if (selection == 'Yes') { $('.form-item').show(); } else if (selection == 'No') { $('.form-item').hide(); } }); </script>
  14. Site URL: https://www.spacescan3d.com/ I want to add a text block to a Gallery Section that doesn't allow insertion of text blocks (no insertion points). I don't want to just add another section above with text--it sets the text too far away from the gallery image ("Photography Services...etc" should have roughly the same top-padding as the other two sections have with their images). I'm trying to use .prepend but I can't get the script right. Nothing shows up and I'm not sure what the best selector is to use. Does data-section-id work with .prepend because this would be the easiest method, I think. Let me know what info you need from me to help you help me (haha) Thanks!
  15. Site URL: https://bywater-collective.squarespace.com/ Hi all - I am trying to use Jquery in order to give the ability for visitors to choose between a specific color theme on my client's 7.0 website. I have seen a number of tutorials walking through light vs dark mode, however I am trying to accomplish the following : Have three separate "color themes," that alter the index-page background color, and h1 font-color Depending on the "color theme" that is selected, have the logo image source, and photo image source within our mega-menu change accordingly. Here is an example of a website that displays the ability to toggle between "themes," and I've attached mockup examples of each "style". You can find my client site here, I appreciate any help and direction!
  16. Please see Calendar Block Event Change. Altering the events in a Calendar block can be tricky because the events are loaded in a lazy fashion. This means you need a MutationObserver to watch for the events to be loaded so you can alter them. My code is a base effect. It does not make changes on its own. It just does the watching for you. From there it is up to you to write callbacks to do the actual work. This isn't the end all be all of MO's but may be able to help in many cases. After using the basic structure of this code for several effects I figured why not break it out and share! 🙂
  17. 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. 🙏
  18. 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
  19. Please see Add Categories Attribute to Event Detail Page. An oldy but a goody. I coded this effect sometime back. Apparently the post for the code had gone missing or never made it to the public forum. Posting here to keep it in the collective memory. 🙂
  20. Site URL: https://mikihasa.com Hello Experts, Our shop currently has a large header graphic, and when you scroll past it to where the categories are listed and click one, the category page loads from the top again. For example, if you click on this link: https://www.mikihasa.com/shop/rainbows/ that will load at the top. However, if I could add an anchor near the Shop/Categories section like <p id=here></p> and then use #here in the link above, it would jump down to that part of the page. Make sense? Here's a link to the Squarespace support article that describes how to do it: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links I looked at the page source for the Shop and found an id= in the vicinity of where the link should jump to, and so here's an example of where I'd like the link to point: https://www.mikihasa.com/shop/rainbows/#page-section-61f4bd35e06b2551e3536224 but I am not sure if that id will change over time, so I'd like to use a custom one that I control so I could be sure it would stay the same. If it is possible to insert such a block, then I'll also need to be able to edit the links for the categories to add the #here (or whatever) to those links. Please let me know if this level of customization on this kind of page is possible, or if I need to use some other method (or redesign the page). Thank You, Kim at Mikihasa Decor
  21. Site URL: https://lifelab.world/en/home Hello everyone, I need some help on the blog page as there are some words that are not translated. I am on a SS 7.0 business plan. I used bradgood tutorial in creating a multilingual site. I have been trying to follow other threads and solutions here on SS forum, but none seem to work on my end: I tried using this script for the blog dates but it does not change. I changed the "New Date" for the German translation. This code is from tuanphan from forum thread: Try adding to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> const translate = { Jan: "New Jan", Feb: "New Feb", Mar: "New Mar", Apr: "New Apr", May: "New May", Jun: "New Jun", Jul: "New Jul", Aug: "New Aug", Sep: "New Sep", Oct: "New Oct", Nov: "New Nov", Dec: "New Dec" } const translate1 = { January: "New Januanry", February: "New February", March: "New March", April: "New April", May: "New May", June: "New June", July: "New July", August: "New August", September: "New September", October: "New October", November: "New November", December: "New December" } const day = { Monday: "New Monday", Tuesday: "New Tuesday", Wednesday: "New Wednesday", Thursday: "New Thursday", Friday: "New Friday", Saturday: "New Saturday", Sunday: "New Sunday" } $(document).ready(function() { $('time.blog-meta-item--date span').each(function(i, e) { const text = $(e).html() $(e).html(translate[text]) }) }) S.fn.init [document] const translate = { Jan: "New Jan", Feb: "New Feb", Mar: "New Mar", Apr: "New Apr", May: "New May", Jun: "New Jun", Jul: "New Jul", Aug: "New Aug", Sep: "New Sep", Oct: "New Oct", Nov: "New Nov", Dec: "New Dec" } const translate1 = { January: "New Januanry", February: "New February", March: "New March", April: "New April", May: "New May", June: "New June", July: "New July", August: "New August", September: "New September", October: "New October", November: "New November", December: "New December" } const day = { Monday: "New Monday", Tuesday: "New Tuesday", Wednesday: "New Wednesday", Thursday: "New Thursday", Friday: "New Friday", Saturday: "New Saturday", Sunday: "New Sunday" } $(document).ready(function() { $('time.blog-meta-item--date span').each(function(i, e) { const text = $(e).html() $(e).html(translate[text]) }) $('time.blog-meta-item--date span').each(function(i, e) { let text = $(e).html() for(let key in translate) { text = text.replace(key, translate[key]) } for(let key in day) { text = text.replace(key, day[key]) } console.log(text) $(e).html(text) }) }) </script> I also used this script to translate the "read more" but it did not work. This is from tuanphan as well. From this forum thread: <script> $('body.body-et .blog-more-link:contains("Read More")').text('Mehr lesen'); </script> Am I doing anything wrong? I tried my best to do further research, but I failed. I am seeking for your kind assistance. Thank you in advance!
  22. Site URL: https://lifelab.world/en/home Hello! I need some help please. I am on a SS 7.0 with brine template. I have been doing my research here on the forum and have been applying codes for solution for the footer to work and display the correct language. However, I have no luck. I made 2 footers from the Top footer blocks for EN and Bottom footer blocks for DE. I am trying this code, but it does not seem to work. This is from @tuanphan Add 2 sections in Footer for 2 languages Top section for English Bottom section for DE Next, find this code if (lang == "de") { $('a[href="/"]').attr("href", "/de/home/"); } edit it to if (lang == "de") { $('a[href="/"]').attr("href", "/de/home/"); $('body').addClass('body-de'); } Next, add this to Code Injection > Header <style> body.body-de footer.sections section:nth-child(1) { display: none; } body:not(.body-de) footer.sections section:nth-child(2) { display: none; } </style> Am I doing something wrong? For reference, I followed this solution in creating a multilingual site: https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template Thank you in advance! P.S.: I currently put the code to hide the bottom footer block so only 1 footer will show on the website .Footer-blocks--bottom { display:none; }
  23. Hi all, So, I use quite a few plugins on my website. All of these plugins call a different version of the ajax library. What is the reason for this? Is it because they will only work with the specific version or is it simply that at the time the plugin was developed, that was the latest version available? Multiple ajax libraries choke the browser and slow the website down. Can this be remedied by simply using the latest version of the ajax library? Thanks Akanksha
  24. Hi there, I have injected some JQuery code into my page in order to set a few conditional fields within a form. The conditional fields are triggered depending on the selection from a radio button as shown below: As you can see when a number other than 0 is selected the conditional fields get displayed. The form works perfectly as expected but the problem is when I switch to form to a lightbox the JQuery seems to stop working and the conditional fields do not appear, no matter the selection. What am I missing here? Any help on this would be appreciated 🙂
  25. A member asked via DM to be able to make alterations to a page based on being logged into MemberSpace or not. This code observes the MS data structures and will run callback code based on login status. On its own the code does nothing but watch. You need to provide the callback functions. Please see Memberspace Observe Log in Status.
  • Create New...