Streaming live at 10am (PST)

AutoPlay Tabs - Any ideas?

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? Webflow - ROLEN

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

Did you find a solution? I’m working on this website www.divrentmedia.nl

Any idea how I can stop the rotation when I hover to the tab to read the text in the tab? Thanks

Hey! OOT, but how did you make these sticky 01-03 cards?

Is it possible to also stop the interaction when the menu is open? I mean, I’ve got an additional tab reload time indicator and it bases on set time in an interaction. I would like to the interaction as the JS is stopped when the hamburger menu is open.

I’m using the code from the cloneable flowbase / @pepperclip, I’ve gone through every comment in this thread, and am still experiencing the tab anchoring with the autoplay on chrome!!! I’ve tried adding the revised code from @kaleem as well, but still see the glitch.

Looks like the solution was to remove the hrefs, and with webflows update, a refresh and republish?
Anything else I missed? Cause sadly that hasn’t proven to work for me :frowning:

<script>
    var Webflow = Webflow || [];
    Webflow.push(function () {

// start everything
      var tabTimeout;
      clearTimeout(tabTimeout);
      tabLoop();

    // Cycles through all tabs
    function tabLoop() {
        tabTimeout = setTimeout(function() {
            var $next = $('.tabs-menu').children('.w--current:first').next();

            if($next.length) {
                $next.removeAttr("href").click();  // user click resets timeout
            } else {
                $('.link-button-tab:first').removeAttr("href").click();
            }
        }, 5000);  // Tab time duration in ms
    }

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