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

  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@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

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. Yo

Posted Images

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

Hi. It looks like you solved with this code

.event-time-24hr {
    display: none;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 0

@dnmddy  Hello there! Increasing the specificity should do the trick, so try replacing the line:

var elements = document.querySelectorAll('.event-time-12hr');

with

var elements = document.querySelectorAll('.mega-menu-container .event-time-12hr');

This way it only target the times in the mega menu.

Edited by jpeter
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...