On my instagram feed widget - there are posts missing

on my instagram feed widget - there are posts missing - they appear as white boxes - any idea why please?

THANKS

1 Like

Hi there, @Khush_Jabble :wave:

I am sorry about this issue!

It’s fixed now. Please check your widget and let me know if all posts are displayed on your end :slightly_smiling_face:

Hi Max

I have a little request – not urgent – but on my ANNOUNCEMENT BAR – you added some code so that the text scrolled – the scrolling clips the edges off and also the scrolling doesn’t really work on a desktop or iPad – only mobile – is there any way to fix this please?

1 Like

Hi there, @Khush_Jabble :wave:

I’ve checked the widget on mobile and couldn’t see the issue with the clipped edges. Could you please share a screenshot of what you mean?

As for the animation script, the text is quite short for the desktop animation in the bar.

If we implement this feature, there will be much empty space on one of the sides when scrolling. Is it fine for you?

Hi Max

As you reduce a windows width – the text simply goes on to numerous lines rather than scrolling

Secondly – if you view it on a mobile – when it scrolls to the ends of the text – it would be nice if there was space before and after the text snippet so that you can read the edges – but it scrolls too quick when it gets to the end lol

1 Like

Got you!

I’ve passed your request on to the dev team. I’ll report back once I have their response :slightly_smiling_face:

No stress no rush

Hey Max – hope you are well – my IG widget is not updating – what am I doing wrong lol

1 Like

Hi there, @Khush_Jabble :wave:

The new posts aren’t showing up in the feed right away because of the cache. Our widget actually uses a cache system to make everything load faster and reduce the server load. So the posts are updated every 48 hours.

If it’s been more than 48 hours, please let me know. I’ll be happy to look into this :slightly_smiling_face:

Regarding the customization of your Announcement Bar, our devs are still working on it. I’ll let you know once the solution is ready!

Aha

No problem – is there anyway to set up LIVE feeds

PS – the announcement bar now looks great!

1 Like

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

It still doesn’t work properly on my mobile (iphone with chrome)

It seems to stop scrolling and missing off the min order = 1 text

What am I doing wrong

1 Like

Ah, I see this! This code worked fine for the previous text, but it should be adjusted for the new one.

I’ve shared it with the devs and let you once I have their response :slightly_smiling_face:

Could you just specify whether you still need the code to add side padding on mobile?

Hi Max – I think the padding is important so that customers see ALL the text

1 Like

Hi Max

Sorry to be a pain

I have just DUPLICATED an announcement bar – now called HTC ANNOUNCEMENT BAR – apart from the custom text EVERYTHING is the same as the one I copied from that works nicely and in the new bar – nothing scrolls – what am I doing wrong please

Its being used on our new business website – www.hollytreecottage.co.uk

Hi Max

Sorry to be a pain

I have just DUPLICATED an announcement bar – now called HTC ANNOUNCEMENT BAR – apart from the custom text EVERYTHING is the same as the one I copied from that works nicely and in the new bar – nothing scrolls – what am I doing wrong please

1 Like

Hi there, @Khush_Jabble :wave:

The thing is that the duplicated widget has a different ID, and it should be replaced in the code. I’ve already done it and now the animation is working there too :slightly_smiling_face:


As for your previous request, now all texts are displayed during the animation and we’ve added this code to the Custom CSS field to add paddings:

[class*="message__TextHTML-sc"] div {
  padding: 0 20px;
}

Also, we are making some final adjustments to make it work perfectly. I’ll let you know once everything is done :slightly_smiling_face:

Hey Max

BUTTON – what code do I need to write to get it to justify LEFT?

https://dash.elfsight.com/widget/e8cdde37-d8a7-4a6c-837e-2dd4df6d1738

STORE LOCATOR – I want to set the opening hours as ALWAYS OPEN AND is there any way to alter the exact location on the map as our location is not quite right!

https://dash.elfsight.com/widget/dd84e547-93a4-4219-a63b-16884b0a650c

Is there any way to add more buttons to my account – they are great!

Hi there, @Khush_Jabble :wave:

Here is the solution to align the Button widget to the left - Align emdedded button to the left.

If you’d love to have more Button widgets in your account, you should upgrade your subscription to a higher plan. If you’re facing difficulties with it, please contact our Support Team at support@elfsight.com. They’ll be happy to assist :slightly_smiling_face:

As for the Store Locator widget, you can change the address in the Address field of the Contacts section:


It’s impossible to set the opening hours as always open, and we have such a request on the Wishlist - Make it possible to set 24/7 working hours.

Just in case, I’d like to note that you can make the working hours almost 24/7 by manually adding the time instead of choosing from the dropdown. For example, 12:00 a.m - 11:59 p.m:


By the way, we’ve made the final adjustments to your Announcement Bar widget and now the animation is working great on mobile. Feel free to check it out :wink:

Can you not hide opening times altogether?

1 Like