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

dnmddy

Circle Member
  • Content Count

    95
  • Joined

  • Last visited

  • Days Won

    2

Posts posted by dnmddy

  1. @jpeter I'm back here with a question. I thought I was correctly targeting this to only apply to the summary blocks in my mega menu, but I see it's affecting the event details page as well.

    It's not hiding the end time, but it's removing the dash between times so they don't really make sense any more. I did remove the code to verify this is the culprit.

    example: https://westendchurchnyc.squarespace.com/events/event-three-9ckek
    pw: notyet

    code:

    <!--Hide end times -->
    <script>
    (function () {
    
      // Defer running the script in milliseconds. Default is 0.
      var DEFER_LOADING = 2000;
    
      if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
      }
    
      if (document.readyState == 'loading') {
        document.addEventListener('DOMContentLoaded', init);
      } else {
        init();
      }
    
      if(window.MutationObserver && typeof window.MutationObserver === 'function') {
        var targetNode = document.querySelector('.mega-menu-container');
        if(targetNode) {
          var config = { attributes: true, childList: true, subtree: true };
          var observer = new MutationObserver(init);
          observer.observe(targetNode, config);
        }
      }
    
      function init() {
        setTimeout(function(){
          var elements = document.querySelectorAll('.event-time-12hr');
          if(elements) {
            elements.forEach(function (el) {
              var time = el.textContent;
              el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
            });
          }
        }, DEFER_LOADING);
      }
    })();
    </script>

     

  2. (Thank you for continuing to trouble shoot this with me)

    I added the new code and it didnt work. I changed the defer loading from 0 to 500 and it didn't work, i changed it to 5000 and now it works! Although obviously there is a lag. Not ideal but better than nothing. I notice there is a also a lag before the megamenu itself works, do you think that is the primary issue? It would be great if both loaded immediately

  3. On 8/21/2020 at 12:27 PM, jpeter said:

    @dnmddy that tells me there may be javascript code for summary blocks that may be running after the code I wrote get's ran. If that's the case, I updated the code to defer when it get's ran after a period of time. I created a DEFER_LOADING variable you can update in the code below. I set it to 500 milliseconds for now.

    
    (function () {
    
      // Defer loading in milliseconds.
      var DEFER_LOADING = 500;
    
      if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
      }
    
      if (document.readyState == 'loading') {
        document.addEventListener('DOMContentLoaded', init);
      } else {
        init();
      }
    
      function init() {
        setTimeout(function(){
          var elements = document.querySelectorAll('.event-time-12hr');
          if(elements) {
            elements.forEach(function (el) {
              var time = el.textContent;
              el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1');
            });
          }
        }, DEFER_LOADING);
        
      }
    })();

     

    Dang, I wish I could say that fixed it... Did you have a look at it on my site to see it in action?

    Here's the static mega menu page which shows it working: https://westendchurchnyc.squarespace.com/mega-menu (pw: notyet) but if you actually toggle the mega menu from the nav bar, it doesnt work. I updated with your recent code and played around the with the time as well.

  4. Thanks @RyanDejaegher for the suggestion. That's not the desired effect either. I'm good with the speed the phrases type out at and the pause between the phrases, what I want to do is increase the pause when all the phrases have been typed out and when the string repeats from the beginning again.

    Testing the implementation here: https://pumpkin-fish-ycls.squarespace.com/
    pw: notyet

    So after the final phrase, "we church", completes, I want there to be a dramatic pause before starting over again with "we pray". I don't have a great understanding of javascript (obviously!) but I can't see where in the code that particular timing is called out.

  5. 15 minutes ago, dnmddy said:

    This broke the full width background on my site and made it fixed, but the the text part works so well...!

    removing this resolved it

    #page .section-background {background: white;}
      #page section * {color: black !important;}
      #page .content {
        width: 100%;
    }

    Is there a way to change how long it pauses when it finished, before repeating?

  6. On 8/5/2020 at 11:14 AM, tuanphan said:

    Just solved for 3 members. Add all to Code Block

    
    <div class="container">
      <h1>
        typewriter01 |
        <!-- The words that we want to have typerwriter effect -->
        <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span>
      </h1>
    </div>
    <style>
    /* CSS RESET */
    
    /* ALIGN CONTENT */
    .container {
      display: flex;
      /* Remove horizontal 'justify-content' center if you want the base text not to move */
      justify-content: center;
      align-items: center;
    }
    
    /* ADD CURSOR */
    .txt-type > .txt {
      border-right: 0.08rem solid #fff;
      padding-right: 2px;
      /* Animating the cursor */
      animation: blink 0.6s infinite;
    }
    
    /* ANIMATION */
    @keyframes blink {
      0% {
        border-right: 0.08rem solid rgba(255, 255, 255, 1);
      }
      100% {
        border-right: 0.08rem solid rgba(255, 255, 255, 0.2);
      }
    }
      #page .section-background {background: white;}
      #page section * {color: black !important;}
      #page .content {
        width: 100%;
    }
    </style>
    <script>
    class TypeWriter {
      constructor(txtElement, words, wait = 3000) {
        this.txtElement = txtElement;
        this.words = words;
        this.txt = "";
        this.wordIndex = 0;
        this.wait = parseInt(wait, 10);
        this.type();
        this.isDeleting = false;
      }
    
      type() {
        // Current index of word
        const current = this.wordIndex % this.words.length;
        // Get full text of current word
        const fullTxt = this.words[current];
    
        // Check if deleting
        if (this.isDeleting) {
          // Remove characters
          this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
          // Add charaters
          this.txt = fullTxt.substring(0, this.txt.length + 1);
        }
    
        // Insert txt into element
        this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
    
        // Initial Type Speed
        let typeSpeed = 50;
    
        if (this.isDeleting) {
          // Increase speed by half when deleting
          typeSpeed /= 2;
        }
    
        // If word is complete
        if (!this.isDeleting && this.txt === fullTxt) {
          // Make pause at end
          typeSpeed = this.wait;
          // Set delete to true
          this.isDeleting = true;
        } else if (this.isDeleting && this.txt === "") {
          this.isDeleting = false;
          // Move to next word
          this.wordIndex++;
          // Pause before start typing
          typeSpeed = 500;
        }
    
        setTimeout(() => this.type(), typeSpeed);
      }
    }
    
    // Init On DOM Load
    document.addEventListener("DOMContentLoaded", init);
    
    // Init App
    function init() {
      const txtElement = document.querySelector(".txt-type");
      const words = JSON.parse(txtElement.getAttribute("data-words"));
      const wait = txtElement.getAttribute("data-wait");
      // Init TypeWriter
      new TypeWriter(txtElement, words, wait);
    }
    
    </script>

    Notes: Haven't tested with SS 7.0

    This broke the full width background on my site and made it fixed, but the the text part works so well...!

  7. Hi Circle,

    I'm helping a church client reimagine how a church can function in this virtual time and space. I hope to create a "user dashboard" or sorts, for congregants to see a summary of all the things on the site they interact with.

    The site will have solo prayer resources (guided meditation audio tracks, movement videos, etc), a prayer feed (post a prayer/comments wall), group worship Zoom events, the ability to schedule a 1-1 check in with a pastor, a sermon archive, volunteering opportunities/signups, and more.

    So for example, a user "hearts" a guided mediation, posts a prayer, and "wants to attend" Sunday worship, they'll see these assets summarized on their dashboard.

    Has anyone built anything like this with Squarespace before? Are there integrations that can accomplish this? I have a feeling this high-level integration of assets is too complex for Squarespace, and that this is an unfeasible undertaking. But I'm asking!

×
×
  • Create New...