AutoPlay Tabs - Any ideas?

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>
5 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.

1 Like

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>

Hi, I’m having the exact same problem of not being able to continue typing in a text input area when one tab transitions to another. Similarly to @Charlie_Bradford, this is causing problems in filling out forms. Is there any way to address this?

Hi @niot117 ,

my workaround was to have my form as a pop-up, and when the form div is visible the tabs stop cycling through, then resumes the cycle when the div is hidden again.

you can see my code above, and here is a link to my site so you can see how it works.

hope this is helpful

I need multiple auto rotating tabs components on a page but only the first instance will work, does anyone know a fix to get the others to auto rotate as well??? Please help! thanks in advance.

Here’s the link: https://preview.webflow.com/preview/tabs-progress-lines?utm_medium=preview_link&utm_source=designer&utm_content=tabs-progress-lines&preview=202b57d9eac91571a779b09555318d91&mode=preview

Hi there! I am using the tabloop code and am having the glitching/re-anchoring issue on just safari as well. See screencast for brief walkthru/explanation: https://www.loom.com/share/fe7e806d43394190beb14df0ece09a1a

Here is read-only link as well: https://fearless-2020v3.webflow.io/

Code I am using:

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

// define loop - cycle through all tabs
function tabLoop() {
    tabTimeout = setTimeout(function() {    
   
        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();
        }
    }, 1200);  // 1ish second tab loop
}


// reset timeout if a tab is clicked
$('.tab-link').click(function() {
    clearTimeout(tabTimeout);
    tabLoop();
    });
});

Thank you for your help!
-Lucy

@hellolucydesign and everyone.

I Hate Safari, it’s worse than IE, 100% of the bugs I run into when developing projects occur only in Safari, I hope it dies soon,

Now let’s get to the update that helped me fix the bug, you need to replace two lines of code.

$next.click(); 

with

$next.removeAttr("href").click();

and

$('.tab-link:first').click();

with

$('.tab-link:first').removeAttr("href").click();

I hope this helps.

Thank you, this solution works for me.
But now I found a new problem, my navigation menu is affected by the script it auto closed after the timeout. Is the script also affecting the w–open state on navigation? Sorry i am a novice in javascript and webflow.
Thankyou in advance.

Same thing! Any luck with it?

Did you found solution? I’m having the same struggle.

hi, yes I have found the work around solution by adding some script. Here my code, hope this help :slight_smile:

function tabLoop() {

    tabTimeout = setTimeout(function() {
        var $next = $('.mtm_tabs-menu').children('.w--current:first').next();
        if($next.length) {
         if ($(".hiddenmenubutton").hasClass("w--open")) {  // if the mobile burger button is open, stop the tabs autoplay
            tabLoop(); 
            }else{
            $next.click();
            }
        } else {
        if ($(".hiddenmenubutton").hasClass("w--open")){
            tabLoop();
            }else{
            $('.mtm_tab-link:first').click();
            }
        }
    }, 2000);       

the rest of the code is the same.

Hey, I would love for this to work but I may be missing something. Mind taking a look? https://preview.webflow.com/preview/rolen-88ef64?utm_medium=preview_link&utm_source=designer&utm_content=rolen-88ef64&preview=aac05e7d461dcafb0d84116fc0b09fa3&mode=preview

hi, i think you should change the .nav into .menu-button as it is your class for the nav burger button, and you should put the code in before section. Hope this help :slight_smile:

1 Like

Thank you so much! That worked. I thought it might be something like that but I’m kinda new to this stuff and did not know the proper syntax or where specifically that came from. That makes so much sense now though. Thank you again!!

Hey, so I think this same issue is also effecting the form at the bottom. Think there is anyway to apply your fix to a form as well as the menu?

Thank you so much Kaleem! It works absolutely fine