On my instagram feed widget - there are posts missing

Ask the Community General Questions
12

Yeah, our devs have added the code to make it scroll when reducing the size of the window on the desktop:

const style = document.createElement('style');
style.innerHTML = `
.elfsight-ab-animation [class*="message__TextHTML-sc"] {
  justify-content: flex-start;
}

.elfsight-ab-animation [class*="message__TextHTML-sc"] div {
  animation: marquee 30s linear infinite;
}

[class*="message__TextHTML-sc"] {
  overflow: hidden; 
  white-space: nowrap;
}

[class*="message__TextHTML-sc"] div {
  width: fit-content;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-50%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}
`;
document.body.append(style);

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

let isAnimated;

function callback() {
  setTimeout(() => {
    const textContainer = document.querySelector('.eapps-announcement-bar-9ea4867d-8adf-4e23-bc7d-0e2ce78032cf-custom-css-root');
    const text = textContainer.querySelector('[class*="message__TextHTML-sc"]');
    if (!text) {
      return;
    }
  
    if ((isAnimated === false || typeof isAnimated === 'undefined') &&
      text.scrollWidth > text.clientWidth) {
      textContainer.classList.add('elfsight-ab-animation');
      isAnimated = true;
    } else if ((isAnimated === true || typeof isAnimated === 'undefined') &&
      text.scrollWidth <= text.clientWidth) {
      textContainer.classList.remove('elfsight-ab-animation');
      isAnimated = false;
    }
  }, 100);
}

const observer = new ResizeObserver(callback);

waitForElement('[class*="message__TextHTML-sc"]')
  .then(() => {
    const textContainer = document.querySelector('.eapps-announcement-bar-9ea4867d-8adf-4e23-bc7d-0e2ce78032cf-custom-css-root');
    observer.observe(textContainer);
  });

This code was added to the Custom JS section on the Settings tab of your widget’s settings.

Also, you’ve asked to add some side paddings on mobile to properly see the whole text during the animation. However, now I see that you’ve changed the text and it’s greatly visible without side paddings.

Do I understand right that you don’t need side paddings on mobile anymore?

Regarding the live updates in the feed, it’s impossible at the moment, but we have this idea on the Wishlist. Feel free to upvote it - Remove or reduce cache time