Menu icon Foundation
Tabs callback for specific tab

I've got a page with 2 tabs, "Audio" and "Video". In one is an audio player, and the other has a video player (same content, just one's audio-only). I'm using MediaElement.js for the audio player, and an embedded YouTube video with the YT JSAPI for the video.

Ideally, when the site visitor switches from one tab to the other, I'd want the player in the tab that is getting closed to pause, for the timestamp to be passed along to the player in the tab that's getting opened, and for that player to start playing from 5 seconds earlier than that timestamp once the tab has been opened.

The problem I'm running into is that I can't figure out how to do anything in connection with specific tabs being toggled. I've tried the callback code on the F5 Tabs page (which really needs improving!):

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
  });
</script>

While that works as far as it goes, I can't figure out how to parse that `tab` object (?) in a way that lets me see which tab it is! I saw someone else do this, but I can't get it to work:

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
    var tabID = $(tab).attr('id');
    console.log("ID is: " + tabID);
  });
</script>

In pseudo-code, I'd like to end up with:

When a tab is opened:
{
    If it was the audio tab:
    {
        Pause the video player (if applicable);
        Get the video player timestamp;
        Play the audio player from (timestamp - 5s);
    }
    elseif it was the video tab
    {
        Pause the audio player (if applicable);
        Get the audio player timestamp;
        Play the video player from (timestamp - 5s);
    }
}

It's the `If it was the audio/video tab` lines in the pseudo-code that I need help with.

Thanks in advance!

tabstabjavascriptcallback

I've got a page with 2 tabs, "Audio" and "Video". In one is an audio player, and the other has a video player (same content, just one's audio-only). I'm using MediaElement.js for the audio player, and an embedded YouTube video with the YT JSAPI for the video.

Ideally, when the site visitor switches from one tab to the other, I'd want the player in the tab that is getting closed to pause, for the timestamp to be passed along to the player in the tab that's getting opened, and for that player to start playing from 5 seconds earlier than that timestamp once the tab has been opened.

The problem I'm running into is that I can't figure out how to do anything in connection with specific tabs being toggled. I've tried the callback code on the F5 Tabs page (which really needs improving!):

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
  });
</script>

While that works as far as it goes, I can't figure out how to parse that `tab` object (?) in a way that lets me see which tab it is! I saw someone else do this, but I can't get it to work:

<script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
    var tabID = $(tab).attr('id');
    console.log("ID is: " + tabID);
  });
</script>

In pseudo-code, I'd like to end up with:

When a tab is opened:
{
    If it was the audio tab:
    {
        Pause the video player (if applicable);
        Get the video player timestamp;
        Play the audio player from (timestamp - 5s);
    }
    elseif it was the video tab
    {
        Pause the audio player (if applicable);
        Get the audio player timestamp;
        Play the video player from (timestamp - 5s);
    }
}

It's the `If it was the audio/video tab` lines in the pseudo-code that I need help with.

Thanks in advance!

FoundationDeck over 4 years ago

The javascript code below(the same one you posted above) works perfectly.

 <script>
  $('#myTabs').on('toggled', function (event, tab) {
    console.log(tab);
    var tabID = $(tab).attr('id');
    console.log("ID is: " + tabID);
  });
</script>

Ensure that the myTabs id is place on the ul tag like the example below.

<ul id="myTabs" class="tabs" data-tab>
  <li class="tab-title active"><a href="#Video">Video</a></li>
  <li class="tab-title"><a href="#Audio">Audio</a></li>
</ul>

Pip Jones about 1 year ago

I'm presuming this is out of date? I'm using v6.4 and this doesn't seem right.

The event documented here https://foundation.zurb.com/sites/docs/tabs.html#js-events is "change.zf.tabs".

The "toggle" event doesn't fire for me, but the "change.zf.tabs" does.

Also in the example above, the tabs HTML is missing the "id" attribute, e.g. : <li class="tab-title" id="video">