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

Hide End Times from Events in Summary Block


rodri333

Question

17 answers to this question

Recommended Posts

  • 1

@rodri333 You can get away with this using JS, here's the code:

(function () {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  function init() {
    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');
      });
    }
  }
})();

Be sure to add the JS code between <script> tag, e.g.

<script>
  // Add JS code here
</script>

 

Here's a video of me running the script using Chrome's dev console:

Link to comment
  • 1

@dnmddy Modified the code a bit, try this out:
 

(function () {

  // Defer running the script in milliseconds. Default is 0.
  var DEFER_LOADING = 0;

  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);
  }
})();

 

Link to comment
  • 1
5 minutes ago, dnmddy said:

(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

Oh  ok I see the issue, the content of the mega menu is being dynamically added in using Ajax and on my end it take about 2 seconds for it to load in which is why changing that value to 5000 works. You can probably play around with that value and reduce to like 3000. 

Link to comment
  • 0
8 hours ago, rodri333 said:

Hi @tuanphan

The code you shared removes all of the time data. I still want to see the start time. Any advice on if this is possible?

This seems impossible

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 8/20/2020 at 8:06 AM, dnmddy said:

It is actually working correctly, but not on the summary blocks in my mega menu

@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);
    
  }
})();

 

Edited by jpeter
Link to comment
  • 0
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.

Link to comment
  • 0

(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

Link to comment
  • 0

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

 

Edited by dnmddy
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...