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