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>
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!
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.
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?
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.
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.
<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, 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.
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
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!!