Stops Working Randomly

Hi @bernadettetp,

Thanks for getting in touch, based on a quick glance I think I see what the issue is. In order for Draw Attention to determine where to place the visual/clickable areas, it has to determine the dimensions of its container (whether that is the full window, or the container div it sits in).

That necessary process gets confused by features like Lazy Load Images or pages that load in Draw Attention after the initial page load. I see the little loading spinner on your page, and technically your page has “loaded” at that point. So when Draw Attention shows up a second later, it’s too late to determine the correct size for the clickable areas.

But why does it work when you open the dev tools? Opening the dev tools triggers a browser “window resize” event. We added some smarts in to Draw Attention so that if a user resizes the window, we dynamically resize the clickable areas (otherwise it doesn’t work too well). You can simulate the same thing by not opening dev tools, but instead just resizing the window. That made the interactive image start working for me.

So, solutions for this…

1. If you can disable that “asynchronous loading” feature in your theme, that will make Draw Attention start behaving normally. Although I’m guessing you built it this way intentionally and there are people attached to that loading graphic, so this may not be a viable option

2. You can trigger the same JavaScript command (the one that we trigger when the window resizes) after the loading has finished. If you execute the JS: hotspots.init() after you know Draw Attention is showing on the page, it will fix the issue you’re seeing.

Hope that helps!

Thanks,
Nathan

The best way would be to execute hotspots.init() when you know the page has loaded. If the theme doesn’t support that, the ugly/less-elegant way of doing this would be to write something like this JavaScript:

jQuery(function() {
  setTimeout(function() {
    hotspots.init();
  }, 3000 );
});

that will automatically trigger the resize/recalculate script for Draw Attention 3 seconds after the spinner starts spinning on your page. The problem is that you’re guessing that 3 seconds is the right amount. That may be too long (they get to that map before 3 seconds) or too short (the page takes 5 seconds to load, so you have the same issue you have now)

if you want to change it to 5 seconds, that 3000 would just become 5000

Again, this isn’t an ideal solution, but it would work in a pinch

Thank you so much for the quick response and explanation!

How do I execute hotspots.init() after the page has loaded? Does Draw Attention have to be scrolled down to and visible on the screen or the page just has to be loaded for this to work?

Hello @bernadettetp,

The code Nathan sent in his second post will automatically wait 3 seconds (3000 milliseconds) after the page is loaded to execute.

Basically, the hotspots.init() function just needs to be called once the Draw Attention image is shown on the page. Can you give Nathan’s code a try to see if that works for you?

It’s not working for me. Is this correct the way I have it here on the page?

https://snag.gy/tjQwhY.jpg

Hi there, I think you just need to remove the alert() part, and use this instead:

<script type="text/javascript">
jQuery(function() {
  setTimeout(function() {
    hotspots.init();
  }, 3000 );
});
</script>

I believe it is working now, thank you for your help!

No problem, glad it’s working now ??