Easy Tabs: multiple tab rows

Posted on by

I am falling behind in my schedule, and several posts will only be published in the beginning of next year. However, I didn’t want to postpone this one as this is by far the number one request: how to split the tabs row, on my Easy Tabs solution.

This post explains how you can tweak the Easy Tabs v2 to achieve this. The option will be included in the next public release of the Easy Tabs Web Part.

To split the tabs row into two, follow these steps:

– include the Easy Tabs Web Part in your page. This is a Content Editor Web Part that contains a script.

– edit it, using the source editor of the CEWP.

– find this line of code:
activateTab(ActiveTab);

– replace it with:

var splitdiv = document.createElement("div");
var index = Math.floor(TabsTD.childNodes.length*0.5);
TabsTD.insertBefore(splitdiv,TabsTD.childNodes[index]);
activateTab(ActiveTab);

Basically, what we’re doing is simply add a “line break” in the middle of the tabs row (hence the 0.5 in the script).

You can of course add more than one line break, for example:

var splitdiv1 = document.createElement("div");
var index1 = Math.floor(TabsTD.childNodes.length*0.7);
TabsTD.insertBefore(splitdiv1,TabsTD.childNodes[index1]);
var splitdiv2 = document.createElement("div");
var index2 = Math.floor(TabsTD.childNodes.length*0.3);
TabsTD.insertBefore(splitdiv2,TabsTD.childNodes[index2]);
activateTab(ActiveTab);

Adjust the split values (0.3 and 0.7 in the above example) to your own needs.

Hope this helps!

Note: if you attended the Easy Tabs workshop, the split option is included in your Easy Tabs version (3.1). If you need more than two rows, here is a solution I have already posted on the Stump the Panel forum:

This is the current split function in v 3.1 (written in jQuery):

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.5-1);
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

splitindex is the index at which the row will be split. If you have 16 tabs, then:
splitindex = 7 (indexing starts at 0 in JavaScript)

You can change this calculation to include more splits, for example:

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.3-1);
$(ET001_TabContainer).children().eq(splitindex*2).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

Or you can force your own values:

//split
$(ET001_TabContainer).children().eq(5).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(11).after("<div style='font-size:0px;'></div>");

And if your users ask for too many rows…switch to a Quick Menu Web Part!

17 thoughts on “Easy Tabs: multiple tab rows”

  1. Pingback: Tweets that mention Easy Tabs: multiple tab rows « Path to SharePoint -- Topsy.com

  2. Christophe,
    In the following excerpt from your post…

    – replace it with:
    var splitdiv = document.createElement(“div”);
    var index = Math.floor(TabsTD.childNodes.length*0.5);
    TabsTD.insertBefore(splitdiv,TabsTD.childNodes[index]);
    activateTab(ActiveTab);

    …is [index] intended as literal syntax or as a parameter?
    If intended as a parameter, where would I obtain the value to substitute?

    Before the change, the tabs display as a single row, no problem.
    After the change, however, using [index] as literal syntax, the tabs are no longer visible.

    I am very eager to get this split to work, and look forward to your reply.
    Thank you very much
    Robin

  3. Followup post…
    Christophe,
    Please excuse my previous post which was obviously premature since I now see the variable index being declared beforehand.
    In this case, the tabs disappear when the specified code is replaced as instructed.
    However, the tabs disappear until the code change is backed out.
    Would welcome your thoughts or clarification.
    Thank you
    Robin

    • I’m a government contractor trying to implement Sharepoint in one of the departments of a government agency.

      The EasyTabs webpart is very important to us. However, I was wondering if there was a way to implement nested tabs (having more tabs appear below after click on of the main tabs) by simply tweaking some of the Easy Tabs code.

      Does anybody know how to do this?

  5. Hi Christophe

    Thanks for the update on the Tabs.

    I tried replacing the code, but the line you have that just show Activate Tab – I dont see.

    All I have is

    activateTab12345(ActiveTab12345);
    }

    i cannot get it working.

    You have noted that 3.1 is available to those that attended the workshop.

    Are those that attend the workshop gonig to be the only people that get your new code – regardless of the topic ? or would it be made available at sometime in the future?

    Now that Mark at EUSP has started developing all the workshops that you have to pay for, all the good work that he and you have done in the past that was made available is no longer there.

    I understand everyone needs to make money, but not everyone can afford to drop $129 everytime someone comes up with a new idea or updates some code.

    Personnally I think everyone has got away from what started out to be a good thing which was sharing and growing the Sharepoint Community.

    Perhaps we should all start to charge an entrance fee to our sites as well.

    Iain

  6. Iain,

    I understand your concerns and I appreciate that you share them.

    However, I think you’re overreacting and not being fair when stating that “all the good work that was made available is no longer there”. Read my posts from the past few months and you’ll see that I continued sharing. It’ll be the same in 2010.
    What is true is that as the content of my site grows, I spend less time writing new posts, and more time responding to comments and e-mails. This is my choice, to try and make this place as interactive as possible.

    What I am doing with the workshops, and will be doing with the membership site, is at a different scale and cannot be compared with existing free sites. For the workshops for example, we are talking about weeks spent inventing new methods, and developing and testing dozens of Web Parts. This is not sustainable – and wouldn’t even exist – without a model like what Mark started with the workshops.

    Christophe

  7. Iain,

    to answer your question: what you have is the “Easy Tabs bis” version (a clone of the original Easy Tabs, for people who need more than one tab row on a page):
    activateTab12345(ActiveTab12345);

    In your case, this should work:

    var splitdiv = document.createElement("div");
var index = Math.floor(TabsTD12345.childNodes.length*0.5);
TabsTD12345.insertBefore(splitdiv,TabsTD12345.childNodes[index]);
activateTab12345(ActiveTab12345);

    • Jerry, the color/style of the tabs is determined by CSS classes.

      The Easy Tabs reuse existing SharePoint CSS classes. This gives a nice effect without overhead. You can of course replace them with your own CSS classes, that display your own colors or background images.

      In the Easy Tabs online workshop, I also offer a different script, based on jQuery, that allows advanced customizations (e.g. rounded corners).

  9. Christophe,

    Apparently, there was a conflict between the EasyTabs web part and the QuickLaunch_control web part obtained in the EUSP Superstar workshop. After I removed the Quicklaunch_control web part, the EasyTabs split into two rows without a problem.

    Strangely, after removing the web part and re-adding it to the web zone, the split EasyTabs now remain and the quicklaunch collapse/expand functionality works just fine. (Quicklaunch_control webpart enables the upper left icon to act as a toggle to collapse and expand the left-hand margin containing quick launch shortcuts.)

    Hopefully, others who encountered the same trouble can benefit from this finding.

    Thank you, Christophe, for posting the code mod to split the tabs, and Happy New Year!

    Robin

  10. Hi Christophe:
    Is there anyway to modify the Easy Tab web part to work with the top navigation row of tabs on the home page? I would like to make the tab row split into 2 rows but I’m not sure where to modify the code.

    Thanks!
    Diana Dwyer

    • Diana, you could modify the script to display the Easy Tabs next to the top nav tabs. But making them work together (select/unselect) would be much more complicated. And seeing several tabs selected at the same time would be a little weird.

  11. I looking for this soln for my travel visa information site .

    but I couldnt figure how to use it I added this webpart couldnt find any tab..

    any thing worng I done

    Narsinh

  12. We just migrated to SharePoint 2010 and have a problem with the Easy Tabs wrapping to a second line. In 2007 the font appeared smaller, but in 2010 the same tabs appear much larger although set to 8pt. How can I get the appearance reduced?

    Thanks, Debbie

Comments are closed.