Streaming live at 10am (PST)

AutoPlay Tabs - Any ideas?

You realize your example has the same bug right ? :sweat_smile:
And that’s normal, since it is exactly the same code :slight_smile:

2 Likes

Well now I’m embarrassed :disappointed:

Hello,

Riley from the Customer Support team. :wave:

We have recently pushed out an update that should allow this experience to run smoothly again. All that needs to be done is a site-republish, and everything should be back to normal.

Let me know if any further issues occur.

Riley

3 Likes

I still experience the issue with trigger moving tabs to viewport on Safari (v12.1.2). In Chrome it works perfectly.

I used the script by pepperclip and re-published the site but it still doesn’t work.

UPDATE:
I noticed the issue only occurs when I’m at the top of the page. If not, then it works fine.

2 Likes

It worked for me. I’m not having the issue anymore, either on Chrome or Safari for that matter.

1 Like

Aslo having trouble in Safari (Version 13.1), both on desktop and mobile.

I found this code worked pretty well out of the box, but I have 3 tabs, and it is not advancing past the 2nd tab. Any ideas why that might be?

I am having a similar issue.

The tabs don’t want to play, but switch back to tab 1 whenever you click on any subsequent tabs. https://buildmedia.webflow.io/temp

But it seems to work on a clone I made of the Flowbase sample projects at:

Any ideas? What am I missing?

1 Like

Hey @RileyJones —autoplay tabs are still anchoring in Safari (13.1) when user is at top of the page. Can you confirm that the team has tested their solution within this environment? Looks like I’m not the only one experiencing this @jensberg @Jovil

1 Like

Since implementing the code I have a tab change from tab 1 to tab 2, but it doesn’t auto change to my 3rd tab. Any idea why @pepperclip ?

No idea :slight_smile: sorry

I was having this issue also. I updated my code to the following which will

  • Wait until the user scrolls down from the top to start
  • Prevent the transition from firing if the user is at the top of the page
  • Cancel the loop if a user manually clicks on a tab

The code:

<script>
    var Webflow = Webflow || [];
    Webflow.push(function () {
        // DOMready has fired
        // May now use jQuery and Webflow api

        // time between automated clicks
        var TAB_DELAY = 3000;

        // setup the initial start (but only do it once)
        var slideshowIsSetup = false;
        var setupSlideshow = function() {
            if(slideshowIsSetup) return;
            slideshowIsSetup = true;

            tabLoop();
        };

        // define loop - cycle through all tabs
        var tabTimeout;
        var tabLoop = function() {
            tabTimeout = setTimeout(function() {
                // don't scroll if at the top of the page
                // fixes safari scroll jumping
                if($(window).scrollTop() < 10) {
                    setTimeout(tabLoop, TAB_DELAY);
                    return;
                };
                
                var $next = $('.tabs_menu').children('.w--current:first').next();

                if($next.length) {
                    $next.click();  // click resets timeout, so no need for interval
                } else {
                    $('.tab_link:first').click();
                }
            }, TAB_DELAY); 
        }

        // reset timeout if a tab is clicked
        $('.tab_link').click(function(e) {
            clearTimeout(tabTimeout);

            // cancel slideshow if user clicked manually
            if(!e.originalEvent) tabLoop();
        });

        // setup slideshow on initial scroll
        $(window).scroll(setupSlideshow);
    });
</script>
3 Likes

Hi Riley,

I’m still having these issue. When it pass to the next tab & if I’m not seeing them it will scroll all the way to the tabs. Hope someone can help me asap. Thanks!

Hi @pepperclip

I’m having the same problem and thought that you may have saved me, but I can see on your site that you are still having focus stolen by the tabs. just thought you might like to know.

Hi @RileyJones

Has there been any update on this?

My site is solely based around having a user fill out a form, but the tabs continue to steal the focus making it really annoying.

Preview link:
https://teg-website-refresh.webflow.io/

Read-Only:
https://preview.webflow.com/preview/teg-website-refresh?utm_medium=preview_link&utm_source=dashboard&utm_content=teg-website-refresh&preview=f6d40b21f6def58ac4f57168e07d64cd&mode=preview

Hi @Charlie_Bradford. I’m not sure I can see what you are describing. Seems to work fine on first look.

@pepperclip

what I was referring to on your clients’ site (which was what was happening on mine) is when a user tries to enter their details into any text area (example join your clients’ mailing list), they will lose focus every time the tab switches.

Every CTA on my site is basically showing the contact form overlaying the page, so I couldn’t really have them lose focus every 6 seconds because of the tabs changing.

I also noticed that on mobile if you have the menu open it will close every time the tabs change too.

I don’t know if this is useful for anyone but here is the code I’ve used to stop the tabs from changing while the mobile menu is visible, and in my case, when the contact overlay is visible.

may not be the cleanest code, but I couldn’t get && working for some reason so just have some nested if statements

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api

// start everything
  var tabTimeout;
  clearTimeout(tabTimeout);
  tabLoop();
  var contact = $('#Contact'); //this variable is set to my contact overlay
  var mobile = $('#nav-mob'); //this variable is set to my nav dropdown

// Cycle through all tabs. Match class names
function tabLoop() {
    tabTimeout = setTimeout(function() {
        var $next = $('.tabs-menu').children('.w--current:first').next();
        if($next.length) 
        {
        	if ($(contact).is(":hidden")) //only run below code if form is not visible
          {
        		if ($(mobile).is(":hidden")) //only run below code if mobile nav dropdown is not visible
            {
            	$next.click();  // user click resets timeout
            }
            else
            {
            tabLoop(); // resart function
            }
          }
          else
            {
            tabLoop(); // resart function
            }
        }
        else if ($(contact).is(":hidden")) //only run below code if form is not visible
        {
        	if ($(mobile).is(":hidden")) //only run below code if mobile nav dropdown is not visible
          {
            $('.tab-link:first').click();
          }
          else
            {
            tabLoop(); // resart function
            }
            
        }
    }, 6000);  // 6 second tab loop (change this)
}

// Reset loop if a tab is clicked
$('.tab-link').click(function() {
    clearTimeout(tabTimeout);
    tabLoop();
    });
});
</script>