Timeline widget 3 issues please help

Ask the Community General Questions
1

  • I have 3 issues listed below with the timeline widget - could someone help me please

  • when the widget changes slides my website automatically scrolls back up to put the widget in full view - is there a way to stop this auto scroll?

  • When the page that has the widget loads - the widget doesn’t appear until you move the mouse cursor - is there a way to make it load instantly without having to move the cursor?

  • when the mouse cursor hovers over the timeline - the mouse scrolling wheel doesn’t scroll up and down the page as it should - is there a way to fix this?

3

Hi there, @will3 :waving_hand:

Sure, I’ll be happy to help!

1, 3 - I’ve managed to replicate those issues and passed them to the dev team. I’ll keep you updated :slightly_smiling_face:

  1. The widget appears only after the interaction with the page because of the lazy loading attribute in the widget’s installation code. To make the widget apppear right away, you just need to remove data-elfsight-app-lazy attribute from the installation code:

image
image751×737 39.1 KB

4

Hi there, @will3 :waving_hand:

Thank you for waiting!

I’ve talked to the devs and here’s what I’ve got:

  • Issue with page scrolling because of the autoslide
    This is a bug and our devs are working on it. I’ll keep you updated :slightly_smiling_face:

  • The mouse scrolling wheel doesn’t scroll up and down when hovering hovers the widget
    This is a correct behavior. If you’d still like to scroll the website when hovering the widget, please add this script to the Custom JS field on the Settings tab of your widget’s 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 });
});

waitForElement('[class*="slider__SliderWrapper-sc"]').then(wrapper => {
window.addEventListener('wheel', (event) => {
    if (wrapper.contains(event.target)) {
      event.preventDefault();
      window.scrollBy({
        top: event.deltaY,
        behavior: 'auto'
      });
    }
  }, { passive: false, capture: true });
});
5

Hi, thank you for your replies

I managed to fix the bug issue by adding this code to the custom JS -

Element.prototype.scrollIntoView = function() {};

window.scrollTo = () => {};
window.scrollBy = () => {};

I found a topic on here from a user that had the same issue.

Unfortunately the code for the mouse scrolling issue you pasted above isn’t working for me..

6

Hi there, @will3 :waving_hand:

I see that you have some unpublished changes in your widget. Could you please try to use only the code I’ve shared before (without adding a custom script you’ve found yourself), publish changes and let me know if it worked :slightly_smiling_face:

7

Hi, it’s now published but doesn’t work

8

This happened because this script was added twice. I’ve removed the duplicated version and everything is working fine now.

Could you please check it once again?

9

Thank you it’s now working.. also I’ve removed the code I found and will wait for your devs to fix the bug issue.

Really appreciate your help.

10

Great, you’re welcome :wink:

11

Kudos to both of you! @Max for sticking with it, and @will3 for promptly replying (so many don’t).