Menu icon Foundation
foundation 5 tab issues

I'm going to take a chance and mention all my issues in one post. First, my tabs do switch just fine. I got things styled nicely, but...
- the URL fragment doesn't reliably change when I select tabs. I thought I would see the #tab1 or #tab2 set in the URL consistently, but it tends to happen on first selection, then not after.
- I can't seem to hook into either the toggled or opened events. I looked at foundation.tabs.js to see how things are done and I'm sure I'm finding the right elements in my "onload". I'm following what's shown here: http://foundation.zurb.com/docs/components/tabs.html

Side note, I'm trying to know when tabs are toggled so I can set field focus on forms I have in each tab.

tabsdeep linkingjs

I'm going to take a chance and mention all my issues in one post. First, my tabs do switch just fine. I got things styled nicely, but...
- the URL fragment doesn't reliably change when I select tabs. I thought I would see the #tab1 or #tab2 set in the URL consistently, but it tends to happen on first selection, then not after.
- I can't seem to hook into either the toggled or opened events. I looked at foundation.tabs.js to see how things are done and I'm sure I'm finding the right elements in my "onload". I'm following what's shown here: http://foundation.zurb.com/docs/components/tabs.html

Side note, I'm trying to know when tabs are toggled so I can set field focus on forms I have in each tab.

Andy Grand over 5 years ago

You can use some extra jQuery to enable URL access to a specific tab (works for any element within a tab too).

 var idx = document.URL.indexOf("#");
    if (idx != -1) {
        var hash = document.URL.substring(idx + 1);
        $(".tabs").children("dd").each(function() {
            var id = $(this).find("a").attr("href").substring(1);
            var $container = $("#" + id);
            $(this).removeClass("active");
            $container.removeClass("active");
            if (id == hash || $container.find("#" + hash).length) {
                $(this).addClass("active");
                $container.addClass("active");
            }
        });
    }

NIkos V over 5 years ago

Zurb should definetely add access to specific tab through url ....

PhillipPDX over 5 years ago

Alok,

In your example below, is there anyway to interrogate the tab object to see which tab is selected?

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

Thanks,
Phillip

PhillipPDX over 5 years ago

I have come up with a fairly simple solution that has helped me pseudo deep link to specific tabs using JS.

I have 2 tabs (Sign In) and (Create Your Profile) as follows:
HTML
<dl class="tabs" data-tab>
<dd class="active"><a href="#pnlSignIn"><i class="ss-password"></i>&nbsp;@G.GlobalResources.LIT_SignIn</a></dd>
<dd><a href="#pnlCreateProfile" ><i class="ss-add-user"></i>&nbsp;@G.GlobalResources.LIT_CreateYourProfile</a></dd>
</dl>

I have links on each tab that will allow you go navigate to the other tab (showing the one for Create Your Profile):
HTML
<span id="noProfile">@string.Format(G.GlobalResources.MES_NewToApp, T.Shared.ApplicationName) &nbsp;&nbsp;<a href="#pnlCreateProfile" id="switchCreate" onclick="showCreateProfileTab();">@G.GlobalResources.LIT_CreateProfile &gt;</a></span>

// Show create profile tab.
function showCreateProfileTab() {
$('#pnlSignIn').removeClass('active');
$('#pnlCreateProfile').addClass('active');
$("#FirstName").focus();
}

// Show sign in tab.
function showSignInTab() {
$('#pnlCreateProfile').removeClass('active');
$('#pnlSignIn').addClass('active');
$("#UserName").focus();
}

PhillipPDX over 5 years ago

Martin makes some very valid points in his post above. I have no problem moving to tabs as they currently are but not being able to deep link to specific tab is VERY inconvenient. This is something I feel that you guys should really address.

Best,
Phillip

Martin over 5 years ago

I've been reading the comments on Foundation5 tabs and I would consider deprecating deep linking on tabs a major step backwards. Being able to open a page with tabs and to pre-select the correct tab for the 'context' in which the page was opened seems a sensible and helpful 'useability' feature.

It's not just Tabs which have changed in concept between previous release and this e.g. Sections/Accordion

Loosing such features between Foundation releases undermines confidence in Zurb Foundation as a famework. What will be deprecated next time - and what will be the impact on those who have built sites around those functions? Would you not agree?

I can understand your rationale for wanting to address issues around the volume of custom code in sections, but cannot the replacement Tab implementation find a method of preserving the concept/functionality of deep linking (even if we have to modify how it is invoked)?

Hope you can help with enabling the previous functionality of Tabs?

PS - Like the new forum! :-)

Alok Jethanandani over 5 years ago

Hey david, thanks for the clarification. In previous versions of Foundation we had sections with which one could use deep linking to change tabs using the hashmarks in the URL scope. We've discontinued the use of Foundation section because of reasons I mentioned above.

You might need to custom develop your own script to make something like this work. I'll talk to our engineers to see if we can bring this back.

Cheers
Alok

David Kavanagh over 5 years ago

Upon further inspection, I see that the code I referenced isn't called unless a tab selection is made. So nothing is looking at the href till a tab is selected. In that case, why? If selection is based on the user's input, what is the href decoding doing? just trying to understand the intent here.

David Kavanagh over 5 years ago

Maybe I wasn't very clear. Let me try again. :-)

I wasn't clear on the way tabs were supposed to interact with the URL. In the foundation.tab.js (5.0.3) file, I see these 2 lines;

             target = $('#' + this.href.split('#')[1]),

         target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);

This leads me to think that a URL fragment can be used to pre-select one of the tabs. If that is true, I don't think it works properly. And, if that should be true, it would be great for tab selection to effect the same kind of change in the URL upon tab selection. That would make tabs book-markable.

I'm all set with the focus issue, once I got the 5.0.3 tab code in place, the listeners started working (as mentioned in another post above).

David

Alok Jethanandani over 5 years ago

Hey David, thanks for posting this. I'm Alok from ZURB and from what I understand there are three problems here:

1) Frustration with why we've changed sections to tabs
2) URL callback doesn't work reliably
3) Can't access whether the object is active/focused or inactive/unfocused

Answers:

1) We changed to tabs because this markup is more lightweight and easier to style using CSS. Sections were injecting too much custom HTML markup that was hard to style.

2) URL callbacks should work reliably. If not, we'll have our engineers look into it. Try this code:

 <script>
  $(document).foundation({
    tab: {
      callback : function (tab) {
        console.log(tab);
      }
    }
  });
</script>

3) To check for active/focused state try this code:

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

Let me know if this helps.

Cheers
Alok

David Kavanagh over 5 years ago

More on the tab events. It looks like the events are triggered on the DL and DD elements, not the tab content classes. That is important when setting up listeners.
The "opened" event is triggered before the tab is actually switched, so you can't use that listener to (for example) set focus on a form field (bummer).
The "toggled" listener is fired on the data-tab DL. It is passed a single "tab" argument (as well as the normal event). From what I can tell, that "tab" argument is useless in determining which tab was selected. This event IS fired after the tab is switched, so in theory, you could go look for what tab content is visible if you want to set focus.

David Kavanagh over 5 years ago

I found the 2nd problem. The foundation.min.js included tabs 5.0.1, but I had the separate file for foundation.tab.js which is 5.0.3. I included that and now my "opened" callback is being called!

So, the URL re-write issue is still a question. I even type in the fragment in the URL and it doesn't take me to the "right" tab. Should it?

David Kavanagh over 5 years ago

I found this:
http://stackoverflow.com/questions/20155383/foundation-5-sections

Kinda confirms what I'm seeing, but I thought it was such a flip-flop to go from recommending sections in 4 to dropping them entirely in 5!

David Kavanagh over 5 years ago

Perhaps somebody could comment on tabs vs sections? I found F4 docs that suggest sections replace tabs and some Foundation training I had in October showed us using sections or tabs and accordians.
This documentation (which looks to be "current") talks about tabs, but not sections (http://foundation.zurb.com/docs/components/tabs.html)

David Kavanagh over 5 years ago

I can invoke the open listeners manually via the javascript console like this; $('#eucalyptus').trigger('opened'); so that tells me that the listener is properly set up.

Here's the tab setup;

Log in to Eucalyptus
Log in to AWS

and the listener config;
$('#eucalyptus').on('opened', function (event) {
console.log("opened! euca");
$('#account').focus();
});
$('#aws').on('opened', function (event) {
console.log("opened! aws");
$('#access_key').focus();
});