using foundation 5 joyride with tabs

Question

Is there a way to switch tabs with foundation 5 Joyride? I have foundation tabs on the page and want Joyride to point elements on different tabs.

I'm working on this exact same problem at the moment. My current approach is to use the callback functions to determine if the next step requires me to manipulate the DOM, if so you can attach the "active" class to the tab you want, or in my case add a display class to a hover menu item. I'll post my code when I get it working. — Steven Zurek, Nov 24 '14 at 18:30

score 0 · Answer 1 · answered Jan 09 '15 at 11:34

0

Like mentioned in the comment from Steven, you could use the callback either in the pre or post step callback function you activate the tab you need.

post_step_callback     : function (){},    // A method to call after each step
pre_step_callback      : function (){}    // A method to call before each step

Hope this helps...

answered Jan 09 '15 at 11:34

LeanStruments

21
2

I'm not working on this issue anymore, but it's interesting to discuss this issue. The problem with post_step_callback is that it has one function that is executed after each step. How can I determine which step number currently opened and open needed tab? – Rio Jan 15 '15 at 15:40

score 0 · Answer 2 · answered Mar 07 '15 at 22:38

Here's what worked for me. I looked around and couldn't find anything useful, so wrote this. The hardest part was figuring out how to get the id of the target anchor. This was found buried in the 'this' object available to the callback.

$(this.$target)[0].id;

The 'content' class is used by foundation to identify the content to display when a tab is clicked. So traversing up the .parents tree finding the enclosing elements gives you the content tab(s) holding your link. And then of course you have to add an id to the <a> element of the tab you want to click. If you name it the same as your content div, with '-a' appended, you should be good to go.

html:

<dl class="tabs radius" data-tab id="my_tabs">
    <dd class="active"><a href=\"#tab1\" id=\"tab1-a\">Tab 1</a></dd>
    <dd class="active"><a href=\"#tab2\" id=\"tab2-a\">Tab 2</a></dd>
</dl>
<div class="tabs-content">
    <div class="content" id="tab1">
        <article id="joyride_stop1">...</article>
    </div>
    <div class="content" id="tab2">
        <article id="joyride_stop2">...</article>
    </div>
</div>

js:

$(document).ready(function() {
    $(document).foundation('joyride', 'start', { 
        pre_step_callback: function(i, tip) {
            var target = $(this.$target)[0].id;
            if($('#' + target).parents('.content').length > 0) {
                $('#' + target).parents('.content').each(function() {
                    var id = $(this).attr('id');
                    if($('#' + id).is(':visible') == false) {
                        $('#' + id + '-a').click();
                    }
                });
            }
        }
    });
});

This will work on any page, whether it contains tabs or not, so it can be universally included across a site.

using foundation 5 joyride with tabs

2 Answers2