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

brandon

Circle Member
  • Content Count

    2,133
  • Joined

  • Last visited

  • Days Won

    29

Posts posted by brandon


  1. I agree with Paul. Having said that, I once had a client that insisted against my repeated advice. I managed to convince them to only have it blink a few times and only on the home page. Something like this:

    .homepage .sqs-announcement-bar-dropzone {
      animation: flash 0.9s linear;
      animation-iteration-count: 4;
    }
    
    @keyframes flash {
      50% {opacity: 0.5;}
    }

    There may be better approaches, of course.


  2. Hi @VLabrie.

    I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement.

    For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice.

    I hope that helps.

    -Brandon


  3. Hi Chris.

    It helps others provide suggestions and specific code solutions if we have a link to the site in question and/or the name of the template you're using (though a link is better). For sites in trial mode, set the site visibility and password and provide that as well. That makes it as easy as possible for coders here to look at the issue, write the code, test it, and post it here for you.

    -Brandon


  4. Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section.

    Regarding adding a link to a gallery image:

    • I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section.
    • I've updated the code in my original answer to accommodate gallery items that have links added to them. It requires just a couple minor changes to both the JavaScript and the CSS.
    • I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out.

  5. Hi @Benedetto. The example code is fairly generic. It's simply a matter of changing the selector (in this case ".collection-5d7a891600952e518d49e751 .project-image") to whatever applies to your use-case. One can use browser developer tools / web inspector to locate the collection ID or other selector information, make the adjustment, then add via Custom CSS.

    As is often the case, if you need something more specific, it's best to include a link to the page in question, a description of what you want to achieve on the page. If that's the case, consider editing your message above to include that info (rather than posting a new message, which adds to the length of the thread here).


  6. Henry,

    Give this a shot, inserted via Custom CSS:

    #collection-5dbeb8db6164d93f9b647c33:not(.sqs-edit-mode) {
      .sqs-block-gallery {
        width: 100vw !important;
        height: 100vh !important;
        position: fixed;
        padding: 0 !important;
      }
      #footerWrapper {
        display: none;
      }
    }

    Now, I didn't heavily test that, but it'll get you started. Keep in mind that the CSS is setup to only work when you're viewing your site outside of edit mode (not logged in). That way, you can still edit the gallery as you'd expect, but when visitors see the page, it'll be a full-screen gallery.


  7. Hi there. Insert the following via Custom CSS:

    .Header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 890;
    }
    
    .collection-type-blog.view-list.tweak-blog-list-full-bleed:not(.tweak-blog-list-filter-show) .Header, .collection-type-blog.view-list.tweak-blog-list-full-bleed.tweak-blog-list-filter-show:not(.has-active-filter) .Header, .collection-type-blog.view-item.tweak-blog-item-header-full-bleed .Header {
      position: fixed;
    }

    -Brandon


  8. Hi @briang97603. This is achievable via either JavaScript or CSS.

    Option 1: JavaScript .This would be more complicated and would require swapping src attributes and other attributes in order to make use of Squarespace's dynamic image sizing, ImageLoader.

    Option 2: CSS Background Images. CSS is simpler if you only load a single, high-resolution alternate image via the background-image CSS property. Using media queries, you'd then hide the <img> itself via either opacity, visibility, position, etc. I suppose you could also use media-queries to load various alternate images of various resolutions/sizes if you really wanted to. Usually, with Squarespace sites, I tell people to just load a single high-resolution image because it's usually not significant compared to the collective size of the page. Some CSS will be required to resize the gallery itself. In any case, you can upload the images via file storage or via an image gallery collection, etc. Then, use those file paths as the alternate img file paths, whether using JavaScript or CSS.

    Option 3: Two gallery blocks & CSS. Put the skyscrapers in one, and the square ads in the other. Use CSS media queries to show one gallery on desktop and show the other on mobile. That would look something like this (Where the code says "TBD" is where the block ID of the square gallery would be. You can identify block IDs using your browser's developer tools/web-inspector.):

    /* Show skyscraper */
    #block-yui_3_17_2_1_1537482878901_13769 {
        display: block;
    }
    /* Hide square */
    #block-yui_TBD {
        display: none;
    }
    
    @media only screen and (max-width: 640px) {
        /* Hide skyscraper */
        #block-yui_3_17_2_1_1537482878901_13769 {
            display: none;
        }
        /* Show square */
        #block-yui_TBD {
            display: block;
        }
    }

    The first option may take an experienced Squarespace dev. 4 hours or less to do in a way that allowed you to maintain it over time, changing ads. The second would probably take 2 hours or less, and the third an hour.

     


  9. Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post.

    If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question?

    If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

    image.png.801cd4f9a3a7fe730b35c332e36fc6cf.png


  10. Alright, here's a repost for those that cannot access that particular post:

    Quote

     

    The following script, inserted via sitewide footer code injection seems to work for me, in my brief tests:

    Option 1: Redirect.

    
    <script>
      // When a product is added to cart, redirect user to /cart page.
      (function() {
        var cartBtns = document.querySelectorAll(".sqs-add-to-cart-button:not(.cart-added)");
        var i;
        for (i = cartBtns.length - 1; i >= 0; i--) {
          new MutationObserver(function(mutations) {
            if (mutations[0].target.classList.contains("cart-added")) {
              window.location.href = "/cart";
            }
          }).observe(cartBtns[i], {
            attributes: true,
            attributeFilter: ["class"]
          });
        }
      })();
    </script>

     

    Option 2: Prompt.

    
    <script>
      // When a product is added to cart, add a prompt below the button with links to other actions.
      (function() {
        var cartBtns = document.querySelectorAll(".sqs-add-to-cart-button:not(.cart-added)");
        var i;
        for (i = cartBtns.length - 1; i >= 0; i--) {
          new MutationObserver(function(mutations) {
            if (mutations[0].target.classList.contains("cart-added")) {
              var pd = document.getElementById("productDetails");
              var prompt;
              if (pd) {
                prompt = document.createElement("div");
                prompt.innerHTML = "<p>Item added to cart. <a href='/cart'><b>Go to Cart</b></a> or <a href='/order/cmor-map-pak'><b>Add Display Device</b></a>.</p>";
                pd.appendChild(prompt);
              };
              this.disconnect();
            }
          }).observe(cartBtns[i], {
            attributes: true,
            attributeFilter: ["class"]
          });
        }
      })();
    </script>

    There may be some testing and tweaks necessary for various scenarios, but it’s a good start.

    (Side note: This is one of those instances where I have the feeling there are a number of different ways to go about this, elements/data you could watch-/listen-for, etc. This is just one method that focuses on the user interaction with the add-to-cart button.)

    Let us know how it goes.

    -Brandon

     

     


  11. Something to consider on the Hayden template:

    • Using a fixed announcement bar may cover up the navigation undesirably when scrolled to the top of the site.
    • Using a fixed announcement bar may cover up the navigation when the on-scrolled navigation shows up.

    To deal with these, you could use "sticky" instead of "fixed" and hide the navigation when the user is scrolled down the page. To do that, use the following CSS:

    .sqs-announcement-bar-dropzone {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10001;
    }
    .show-on-scroll-wrapper.show {
        display: none;
    }

    -Brandon

     


  12. Something simple like this should work:

    .Cart[aria-label^='0'], .Cart:not([aria-label]) {
      display: none;
    }

    Let me know how that works for you. It's not something I heavily tested. If it does work, it could be modified using opacity and transitions instead.

    Related:

    Also, is it just me or is there no way to get to the checkout on mobile using the Foster template? Using the demo site, there was no link to the checkout at any point in my mock-shopping.

    -Brandon


  13. Hi Dani.

    Unfortunately I'm a bit swamped at the moment, and the code used on the example site is a prototype, is over-complicated and prone to failure. It's probably not ready to be put into production, since it would need a few more features added to check for various conditions (like content length) and adjust accordingly.

    I do hope to come back to this soon and post a more flexible solution.

    Also, your English is much better than my German! My suggestion about the post title was simply to include as many similar terms as possible, so that others may be able to find your question even if they type in something slightly different.

    -Brandon

×
×
  • Create New...