Events: Close an event automatically when you click another

Ask the Community Customization
1

I need to have an opened event close automatically once a visitor opens another one. Right now a visitor has to close the last one they opened to open another.

I’d also like to be able to close an image by clicking on the image instead of the X at top right.

Thanks,
Steve

2 Likes
3

Hi there @Steve_Cyrkin and welcome to the Community :wave:

Just to confirm: do you want to close the popup on the image click only, or maybe you’d prefer to close it by clicking at any place of the popup background?

image
image567×844 100 KB

4

Hi Max,

Any place on the pop-up background Would be perfect!

Thanks,

1 Like
5

Got it, thanks!

Unfortunately, it’s impossible to automatically close an event when you open another one. I’ve added this idea to the Wishlist and if more users upvote it, we’ll try to think it over in the future -Automatically close event when you click another

As for closing event on popup background click, I’ve passed this request on to the dev team and will report back once the solution is ready :slightly_smiling_face:

6

Hi @Steve_Cyrkin :wave:

Here is the code to close the event on the popup background click:

const IGNORED_CLASSES = [
  'eapp-events-calendar-button-component',
  'eapp-events-calendar-popup-item-readMoreButton',
  'eapp-events-calendar-drop-down-component',
  'eapp-events-calendar-drop-down-item',
  'eapp-events-calendar-share-content',
  'eapp-events-calendar-share-email-button'
];

const callback = (mutationList) => {
  mutationList.forEach(({ addedNodes }) => {
    const popup = [...addedNodes].pop();
    if (!popup) {
      return;
    }
    
    const closeButton = popup.querySelector(".eapp-events-calendar-popup-item-close");
    if (!closeButton) {
      return;
    }
    
    popup.addEventListener("click", ({ target }) => {
      if (IGNORED_CLASSES.some((className) => target.closest(`.${className}`))) {
        return;
      }
      
      closeButton.click();
    });
  });
};

const observer = new MutationObserver(callback);
observer.observe(document.body, { childList: true });

Please add this code to the Custom JS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

7

Hi Max,

Yes, thank you. It works perfectly!

1 Like
8

Great, if anything else comes up, we’re always here to help :wink:

9

I’m still waiting for fix so calendar will display in the textbox on this page: https://live.autographmagazine.com/page/autograph-calendar.

The site is SAAS so I can’t go into deep code like they asked. Just CSS and Custom Code.

1 Like
10

I see that my colleague Renata has already responded to your message in a support ticket. As she said, it’s possible to reinstall the widget via Google Tag Manager (GTM). Here’s the information we need to do it:

  • Where to place the widget - the exact page and page area

  • Access to your Google Tag Manager - you can share access to elfsight.g.sites@gmail.com

Please inform Renata once the access is shared and our devs will gladly assist :slightly_smiling_face:

11

I didn’t see Renata’s email, sorry! I don’t recall using GTM but I’m on the page now and figuring out how to get it to you.
Thanks,

1 Like