AutoPlay Tabs - Any ideas?

Design help General
1

Tried a few work-arounds for automating the ‘tabs’ scrolling through the available content but nothing working available. Any ideas how to get the ‘tabs’ cycling through at a predetermined time?

Thanks in advance

2 Likes
2

Why not using a slider instead?

3

You can do this for tabs but custom code is required. I suggest trying out the suggestion above first, otherwise you can contact me.

4

Yes tried using the slider but this didn’t work as i’d liked.

5

Hi Jason,

Reading another post in the forum with a similar question (https://discourse.webflow.com/t/work-around-to-autoplay-tabs/47807/1) I tried my own twists to the solution and found one that seems to do the job.

Here’s the code I tried and that worked for me :

<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();
            }
        }, 5500);  // 5 second tab loop
    }

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

It basically says you have a function that goes through the tab-link class items that are part of your tabs-menu class to make it switch to the next tab every 5500ms and if you click a tab it restarts timer.

You could change the tab-link and tabs-menu classes to the ones you have in your project as well as change the timer (the value in ms at the end of the tabLoop params).

I’m no js expert so maybe it’s not super clean code… but it works :slight_smile: and that’s probably enough !
Hope it helps

14 Likes
6

Thank you! I was having trouble finding a solution and your code worked for me!

7

Has this been patched? Doesn’t seem to get it to work.

8

Hi,

Is there a way to make this code only work for web?
I would like to disable it for mobile devices.

Thanks for your help.

9

You could wrap the execution of the function tabLoop() with a condition.

Something like : “if screen width < 450px” (javascript - Do something if screen width is less than 960 px - Stack Overflow) or something looking at user agents to detect if it’s a mobile browser (javascript - How to detect a mobile device using jQuery - Stack Overflow) .

Hope this helps

10

I dont think it works at all now it has been patched work before but now all websites that had it stopped playing tabs

11

Hello! I implemented your script, it does work.

BUT there is trouble by my side with it. Every time when tab changes, browser view goes back to tabs section regardless of current view position on site. Do you know is it because of your script or something on my side wrong with anchoring?
Much appreciate in advance.

my website is here - https://psdonline.webflow.io/
read only link - https://preview.webflow.com/preview/psdonline?utm_medium=preview_link&utm_source=designer&utm_content=psdonline&preview=7435df2de32eecabed480c4056696714&mode=preview

1 Like
12

Hmm… I have no idea why it does that.
This script is still running on a site I’ve done for a client and seems to work fine : https://www.fugustructures.com/structures/dome-festival

Apparently webflow now has added an href with a # to the tab links in the tab menu. Maybe the component has changed…
What puzzles me is that when you enter the href’s destination it doesn’t seem to change the tab pane or scrolls to it… So I don’t see how this could conflict with the script.

13

It seems you’ve solved the problem no ?

14

so actually I see the same problem on your clients site …
tried from different browsers safari, chrome, opera.
I’ve noticed problem occurs when I do not touch touchpad at all, so when I scroll and my fingers are on pad - then I could keep reading on place where I am. But when I leave my fingers from pad then my window view jumps back to tabs menu

15

Ah ha! You’re right. this is new !
So webflow definitely changed something to the tabs component if this is happening…

If I think of something I’ll share a patch ! If you find it first, please share :slight_smile:

2 Likes
16

Hi

I have the same problem.
I’ve reported it to webflow support yesterday but had no response so far.

17

This is the answer I got from the support:

I am not 100% sure how you have your custom code setup, however when

Normally when a tab is clicked the focused event triggers which reorients the viewport to the location of the tab, this is expected behavior, if you are automatically changing the tab via code, this will work to change the tab but does not change the focused tab behavior.

You might need to try to prevent the default tab event in code and use some custom method to change the link.

Anyone any idea of js to prevent the trigger that move tabs to the viewport?

18

I’m Having this problem too!!! . I tried to add the .preventDefault() or return false: but so far it seems to not work. :cry:

20

Any news about this ? were you able to find something ?

21

They recently updated the tabs component to make it accesible. The engineer who made these changes is working on a fix today.

2 Likes