Jump to content

Inscape

Circle Member
 View Profile  See their activity

  • Posts

    100

  • Joined

  • Last visited

 Content Type 

Everything posted by Inscape

  1. Inscape
    If you have more than one Summary Block, you can target the specific one you want to display the message by using its block id as shown below (where it says 'block-numbersandletters'): <div id="no-events"></div> <script> window.addEventListener('DOMContentLoaded', (event) => { var summaryExists = document.getElementById('block-99b2e1d5ac7d9ed116cd').getElementsByClassName("summary-title")[0]; if (summaryExists == null) { document.getElementById('no-events').innerHTML = "There are no upcoming events at this time. Check back soon!"; } }); </script> To find the block id, use the "Squarespace ID Finder" Chrome Extension or use your Chrome inspection tool to find the id for the summary block.
  2. Inscape
    Yep, this does it! M
  3. Inscape
    Thanks for the update, @dianeceramics. I never did test this on a 7.1 site, so could be it only works on 7.0.
  4. Inscape
    Thanks for all your help with this @creedon.
  5. Inscape
    Ok, I'm trying to populate Squarespace form fields with the inputs from a calculator form in a code block: https://cobalt-contrabass-xw72.squarespace.com/booking-1 (password: bins123) But as mentioned in this thread, the inputs are clearing as soon as the user starts adding info to the Squarespace form. I'm trying to add the input number from #bins to #text-56a5bb5a-2474-4539-b9d6-6144dfcb83b9-field and the selected radio from input[name="plan"] to #text-f8c41f2d-6eba-473a-8828-aa3c04a210fb-field. Here's the code that's not working because the programmatic input keeps getting wiped: $('#bins').on('change', function() { $('#text-f8c41f2d-6eba-473a-8828-aa3c04a210fb-field').val($(this).val()); }); $('input[name="plan"]').on('change', function() { $('#text-56a5bb5a-2474-4539-b9d6-6144dfcb83b9-field').val($(this).val()); }); I can't figure out how to translate what I have here into what @creedon shared. Can anyone help me?? I was also trying to prefill the fields when the page loaded in case the user doesn't change the radio or number inputs. In the code below, the value is getting wiped when the form is used (I guess because of React). This is less of a priority than the above if anyone could be so kind as to help me!! window.onload = function() { document.getElementById('text-56a5bb5a-2474-4539-b9d6-6144dfcb83b9-field').value = 'Biweekly'; document.getElementById('text-f8c41f2d-6eba-473a-8828-aa3c04a210fb-field').value = '1'; }; Seems like it was so simple and now it's over my head. 😞
  6. Inscape
    That's great @Greg_pns! Looks like the same principle as my solution (using CSS pseudo-elements), with the ability to automatically detect whether the page is French. In my solution, I had previously added a class to all French pages which allowed me to target them in Custom CSS.
  7. Inscape
    @Greg_pns and @HeyItsPrescott, I ended up solving this by using a CSS pseudo-element instead of a script. In custom CSS, added: .field.first-name .caption-text {visibility:hidden} .field.first-name .caption-text::before {content:"Prénom"; display:inline-block !important; visibility:visible !important;} .field.last-name .caption-text {visibility:hidden} .field.last-name .caption-text::before {content:"Nom de famille"; display:inline-block !important; visibility:visible !important;} .description.required {visibility:hidden} .description.required::before {content:"(requis)"; display:inline-block; visibility:visible} Hope this helps!
  8. Inscape
    @paul2009 I'm experiencing what Greg mentioned as well. No matter where and how I add this code, or any script attempting to translate these fields (specifically First Name and Last Name), it doesn't work. I've tried several solutions including yours, and read all your information about the updated classes; still no go. Page I'm working on is here: https://lavender-disc-ta5j.squarespace.com/fr/contact-us
  9. Inscape
    Hi, not sure if you ever solved this. I just came up with a solution for a client that works perfectly. If you add a video block in the Additonal Info section, this code pops the video above your image gallery. You need to add it to your sitewide Code Injection, in the Header Code area: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(".sqs-block-video").insertBefore('.ProductItem-gallery-slides'); }); </script> You can see the result live here: https://ademiboutique.squarespace.com/shop/paris. This is a 7.0 Brine site but as far as I can tell should work the same on 7.1. I can only vouch for it working with a single video block in the Additional Info section. Hope this helps though it was a while ago you asked the question!
  10. Inscape
    Will Myers just posted a solution to the tablet spacing problem! He is offering it for free! https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine
  11. Inscape
    When I reported it to Squarespace, their response suggested they do not consider it a bug. They said they would relay my feedback to the design team, but they didn't use the typical language I have seen from them in the past when acknowledging bugs and saying they are working on a fix. They didn't fix it in advance because they didn't see it as a problem. Therefore, everyone reading this post who thinks it is a problem should submit a support ticket! If they don't know we hate it, they will never fix it!
  12. Inscape
    The same thing happens with text block with a background when next to an expanded accordion, which looks even worse: I've reported to Squarespace but please post here if anyone has found a solution for this!
  13. Inscape
    Another similar option would be to set min-height for .summary-content. This works if you have a bunch of metadata that could also go onto multiple lines. Example: .summary-content {min-height:100px}
  14. Inscape
    Ugh, responding to my own question... just realized that (assuming everything else I mentioned could be accomplished) once you've shared the sign up link with approved members, they could "illegally" share it with unapproved parties, so this is not a complete solution either. Thwarted. Really just need an option to require member approval before granting access.
  15. Inscape
    Hi all, joining this conversation as a client has asked to be able to vet Members for approval before they have access to her content; she is trying to protect artwork from pirates. I'm just wondering if custom code works on Member areas lock screens/sign up screens since I've never tried this before. For example, could you use JS to replace the "Join" buttons/links so that they redirect to a contact form? Then, once you approve a member, they can actually join only if you send them a direct link (because you've redirected all other instances of that link showing up on the site)? I've done this for clients on Circle.so, which is why I wondered if it would work here... but not clear from what's been said whether you can use custom code in member areas, and I've never tried!
  16. Inscape
    Hi, a simplified solution is to paste the following in your custom CSS section: @media screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-children { flex-wrap: wrap; justify-content: center; } } Hope this helps!
  17. Inscape
    I checked out your app and it looks fantastic. But even your cheapest plan is quite expensive... more expensive than Squarespace's Business Plan. So the calendar would cost my clients more than their whole website. I work with small businesses and nonprofits (such as churches and schools) who are not making money off their events. I want to suggest that your app develop a "non-ticketing" plan that is actually affordable for those who are not selling tickets... comparable to Loxi.io which is $8/month. Thanks for sharing!
  18. Inscape
    Actually sorry, here is a better solution I found by combining @tuanphan's solution with another post, to disable both right clicking AND drag and save: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("img").on("contextmenu",function(e){ return false; }); $("img").on("dragstart",function(e){ return false; }); }); </script> Again, this is for images ONLY. It seemed like a better option especially since I inspect elements and copy links so much using right click. If it's not clear, this should go in Settings-->Advanced-->Code Injection-->Header.
  19. Inscape
    I just found this guide by @tuanphan in a different post: https://beaverhero.com/squarespace-disable-right-click/. I used his header script injection to disable right clicks, but I specifically targeted images: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("img").on("contextmenu",function(e){ return false; }); }); </script>
  20. Inscape
    Sorry @aeperri, that's exactly right... I didn't include the Jquery library script because I had already loaded it for other purposes. I sometimes forget to add it to posts like this! I'm SO GLAD you were able to figure it out!
  21. Inscape
    Thanks @tuanphan, I adapted this for a more complex usage and it looks really great! I tried at first to put the html in the code block, the css in Custom CSS, and the script in Code Injections, but it only worked if I put all three within the code block the way you have it here.
  22. Inscape
    I basically just did exactly what you described in your email, @paul2009! Except I put the code in a code block in the footer. <div id="quick-exit"> <h4>QUICK EXIT: </h4> <p>Tap this bar at any time to immediately close this page and check the weather.</p> </div> Custom CSS: #quick-exit { position:fixed; top:0; left:0; z-index:9999; background:#8ae5e2; width:100% !important; padding:16px; text-align:center; } #quick-exit h4 {margin:0 !important;} #quick-exit p {margin:0.2em 0 0 0 !important;} Code Injection: <script> $(document).ready(function(){ $("#quick-exit").on("click", function() { window.open("http://weather.com", "_newtab"); window.location.replace('http://google.com'); }); }); </script> It works perfectly!! Exactly the functionality I wanted! Here it is in action if anyone wants to see: usafv.squarespace.com (password: Alaska). Thanks again @creedon and @paul2009 for all your help with this. I know my client will be so pleased to have this safety feature for those she serves.
  23. Inscape
    Ok super helpful, thanks!! It might just be easier to make my own bar. I'm a little scared of MO... Slightly out of my league and afraid I'll mess it up!
  24. Inscape
    Thanks for this @creedon! I tried the code you sent and it seems to work in admin mode only. But only part of it works: it opens a new tab with the weather, but doesn't redirect the current tab to google. My plan with the announcement bar was just to hide the X so no one could close out of it. 🙂
  25. Inscape
    Hi @paul2009, thanks for your comments that led me to this thread. I read the CSS tricks article and am trying to implement their solution in a simple way using the Squarespace announcement bar to 1. open a new tab and 2. close the current window on click. I added the code and it seems simple enough, but it's not working: <script> $(".sqs-announcement-bar").on("click", function() { window.open("http://weather.com", "_newtab"); window.location.replace('http://google.com'); }); </script> Nothing happens when you click the announcement bar. I also tried .sqs-announcement-bar-content and .sqs-announcement-bar-url (both with and without a url added in the normal announcement bar settings). Thoughts? Site url:https://usafv.squarespace.com/ Password: Alaska
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources