Timeline customization

Ask the Community General Questions
1

Hello,

3

Hi there, @user1525 :waving_hand:

I’ve forwarded your request to the devs. I’ll report back once I have any news :slightly_smiling_face:

4

Thank you so much! :slight_smile:

5

Hi there, @user1525 :waving_hand:

We’ve checked your website and the widget loads really faster and there is no way to make it load even faster. If you notice a significant delay on your end, please share a video screencast of the issue.

As for the popup going down, you can fix it at the center of the widget container, using this code in the Custom CSS field on the Settings tab of your widget’s settings:

.es-animated-event-card-container {
 top: 50% !important;
}

Give it a try and let me know if it worked for you :wink:

6

Thank you very much! That works great!! :slight_smile:

Another quick question — is there a way to disable auto-scroll only on desktop when scrolling with the mouse? I use my mouse to scroll down the page, but when I do, the widget cycles through all the items as well. I’d like to be able to view the widget items only by clicking the marker texts on the left.

8

Could you please send me a video screencast of the issue, when the widget cycles through all items? We’ll be happy to check things for you :slightly_smiling_face:

9

Absolutely, here you go (the resolution may not be perfect due to the smaller file size restriction). And take a look at the jumps at the end of the video. That is from trying to scroll back up to the top of the page.

10

Thank you so much!

I’ve forwarded your request to the devs and will let you know once I have their response :slightly_smiling_face:

11

Hi there, @user1525 :waving_hand:

We’ve fixed the issue by adding this code to the Custom JS field on the Settings tab of your widgets’ settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  const observer = new MutationObserver(() => {
    const element = root.querySelector(selector);
    if (element) {
      res(element);
      observer.disconnect();
    }
  });

  observer.observe(root, {
    childList: true,
    subtree: true
  });
});

function preventDefault(e) {
  e.stopPropagation();
}

waitForElement('.elfsight-app-8f3f76cd-363c-4205-b815-6a9cdeb1ec62 .es-swap-scroll-container').then(scrollContainer => {
  scrollContainer.addEventListener('wheel', preventDefault, {
    passive: false
  });
  scrollContainer.addEventListener('touchmove', preventDefault, {
    passive: false
  });
  scrollContainer.addEventListener('scroll', preventDefault, {
    passive: false
  });
});

Check it out and let me know if you like the result :slightly_smiling_face:

12

Thank you!!! You’ve been such a great help! The solution is perfect!!! :smiley:

13

It’s my pleasure!

Don’t hesitate to contact us here again in case of any questions :wink: