Easy Tabs: any issues to report?

Posted on by

This is a checkpoint. Before I publish more tips on how to customize the Easy Tabs, I’d like to hear from you if you have issues to report.

The most frequently reported issue so far: tabs are visible in edit mode, but not in view mode. I have published the explanation here.

I have also received comments about the tabs not working with Data View Web Parts that include filters, but I am unable to replicate the issue. Everything works fine in my case. If you have an example that doesn’t work, I suggest that you save your Web page (html format) and send it to me. Remember to precise your SharePoint version (wss or MOSS).

Also, note the following restrictions:
– the Easy Tabs work on a site’s home page and on Web Part pages you create (Site actions > Create > Web Part page).
– the Easy Tabs won’t work if you are using a custom Web Part or Master page that doesn’t follow the standard SharePoint structure.
– I am restricting my tests to these browsers: IE7, IE8, Firefox 3, Safari 4 and Chrome 3.

46 thoughts on “Easy Tabs: any issues to report?”

  1. I think people are having problems with DVWP’s because they aren’t using a title with their DVWP. I ran into that problem and then figured it out. I am having a problem with your Multi-Tab webpart. I just don’t know how to get it to make two rows or three… It only makes one row. Can you help me there?

    Thanks,
    Matt

  2. This is a purely aesthetic issue, but I would love to see a way to correct the 2px gap between the tabs and the border around the content boxes. I’ve played with some of the CSS and managed to get it down to 1px by adding the following line to the JS: “WPzone.rows[0].style.background = “#CFE3FD”;”. Of course, the color choice is dependant on the theme so it may require editing.

    It’s minor, it doesn’t stop me from using Easy Tabs. Still, it would be nice to have a way to correct that.

  3. Sorry, to solve my own problem but…

    If you add a function call at the end of the BuildEasyTabs function (say “fixGap();”), you can correct the gap like so:

    function fixGap(){
    WPzone.rows[2].style.display = “none”;
    WPzone.rows[4].getElementsByTagName(“TD”)[1].style.background = “#CFE3FD”;
    }

    At least that works for me.

      • After I posted, I noticed that you’ll need to do:

        WPzone.rows[4]…..background = “#CFE3FD”;
        WPzone.rows[5]…..background = “#CFE3FD”;
        WPzone.rows[6]…..background = “#CFE3FD”;

        …for each tab. So I imagine you’ll need to expand on that to automatically calcuate the total and start at the fifth row ([4]).

        Also while I was playing, I noticed that there was no hover state included. If you add:

        allTabs[i].onmouseover=function() {
        this.className+=” ms-topNavHover”;
        }
        allTabs[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(” ms-topNavHover\\b”), “”);
        }

        between

        ….var TitleID = allTabs[i].id.replace(/tabWebPartWPQ/,”WebPartTitleWPQ”);

        and

        if (allTabs[i] == selectedtab) {…..

        You’ll be able to use the hover states (but you need to include your own css to make it work).

        If you anyone wants to dig deeper into having some different style available here is the CSS I add to the Easy Tabs CEWP.

        #EasyTabs .ms-tabselected, #EasyTabs .ms-tabinactive{ margin-right:10px; }
        #EasyTabs .ms-tabinactive{ background-image:url(/_layouts/images/pageTitleBKGD.gif);}
        #EasyTabs .ms-tabselected{ background-image:url(/_layouts/images/siteactionsmenugrad.gif); background-color:#618FCB; color:White;}
        #EasyTabs .ms-topNavHover{background-image:url(/_layouts/images/topnavhover.gif); background-color:#FFE59D;}
        #SeparatorTD {background-image:inherit;}

        Christophe, I would love to see you take the tweeks I’ve started up to your level, so here is your code with all of my adjustments included to get you rolling:

        /* Easy Tabs for Web Part pages – v 2.0
        Christophe Humbert
        Christophe@PathToSharePoint.com */

        var TabCookie = “TabCookie” + window.location.pathname;

        function GetParentTable(elem)
        {
        while(elem !=null && elem.tagName !=”TABLE”) elem=elem.parentNode;
        return elem;
        }

        function activateTab(selectedtab) {
        if (WPzone.id != “MSOZone”) {
        var allTabs = document.getElementById(“EasyTabs”).getElementsByTagName(“SPAN”);
        for (i=0;i<allTabs.length;i++) {
        var WPCellID = allTabs[i].id.replace(/tab/,"MSOZoneCell_");
        var TitleID = allTabs[i].id.replace(/tabWebPartWPQ/,"WebPartTitleWPQ");
        allTabs[i].onmouseover=function() {
        this.className+=" ms-topNavHover";
        }
        allTabs[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" ms-topNavHover\\b"), "");
        }
        if (allTabs[i] == selectedtab) {
        allTabs[i].className = "ms-tabselected";
        document.getElementById(WPCellID).parentNode.style.display = "";
        document.getElementById(TitleID).parentNode.style.display = "none";
        }
        else {
        allTabs[i].className = "ms-tabinactive";
        document.getElementById(WPCellID).parentNode.style.display = "none";
        }
        }
        }
        }

        function BuildEasyTabs(){

        var TabsTD = document.createElement("TD");
        TabsTD.className = "ms-siteactionsmenu";
        TabsTD.id = "EasyTabs";

        var SeparatorTD = document.createElement("TD");
        SeparatorTD.style.height = "4px";
        SeparatorTD.id = "SeparatorTD"; // added for css styling
        SeparatorTD.className = "ms-pagetitleareaframe";

        var theDIVs = WPzone.getElementsByTagName("DIV");
        for (i=0;i<theDIVs.length;i++) {
        if (theDIVs[i].className.indexOf("ms-PartSpacing")==0) {
        theDIVs[i].style.display="none";
        }
        if ((theDIVs[i].id.indexOf("WebPartWPQ")==0) && (GetParentTable(theDIVs[i]).style.display!="none")) {
        var TitleID = theDIVs[i].id.replace(/WebPartWPQ/,"WebPartTitleWPQ");
        var NewSPAN = document.getElementById(TitleID).getElementsByTagName("SPAN")[0].cloneNode(true);

        NewSPAN.className = "ms-tabinactive";
        NewSPAN.style.height = "18px";
        NewSPAN.id = "tab" + theDIVs[i].id ;
        NewSPAN.onclick = function() {SetCookie(TabCookie,this.id,"/");activateTab(this);}
        TabsTD.appendChild(NewSPAN);

        }
        }

        WPzone.insertRow(0);
        WPzone.rows[0].appendChild(SeparatorTD);
        WPzone.insertRow(0);
        WPzone.rows[0].appendChild(TabsTD);

        if (GetCookie(TabCookie)!= null) {var ActiveTab = document.getElementById(GetCookie(TabCookie));}
        else {var ActiveTab = TabsTD.getElementsByTagName("SPAN")[0];}

        activateTab(ActiveTab);
        fixGap();
        }

        var WPzone = GetParentTable(GetParentTable(document.getElementById("EasyTabsScript")).parentNode);

        function fixGap(){
        WPzone.rows[2].style.display = "none";
        WPzone.rows[3].getElementsByTagName("TD")[1].style.background = "#CFE3FD";
        WPzone.rows[4].getElementsByTagName("TD")[1].style.background = "#CFE3FD";
        WPzone.rows[5].getElementsByTagName("TD")[1].style.background = "#CFE3FD";
        WPzone.rows[6].getElementsByTagName("TD")[1].style.background = "#CFE3FD";
        WPzone.rows[7].getElementsByTagName("TD")[1].style.background = "#CFE3FD";
        };

        _spBodyOnLoadFunctionNames.push('BuildEasyTabs');

        /* To add spacing between tabs*/
        #EasyTabs .ms-tabselected, #EasyTabs .ms-tabinactive, #EasyTabs .ms-topNavHover { margin-right:10px; }
        /* To style the inactive state*/
        #EasyTabs .ms-tabinactive{ background-image:url(/_layouts/images/pageTitleBKGD.gif);}
        /* To style the active state*/
        #EasyTabs .ms-tabselected{ background-image:url(/_layouts/images/siteactionsmenugrad.gif); background-color:#618FCB; color:White;}
        /* To style the hover state*/
        #EasyTabs .ms-topNavHover{background-image:url(/_layouts/images/topnavhover.gif); background-color:#FFE59D;}
        /* To style the seperating gradiant*/
        #SeparatorTD {background-image:inherit;}

  4. Possibly the greatest thing I’ve seen so far from the community!. If they don’t have tabs in 2010 they need shooting. It transforms the usage of pages!

  5. Christophe,
    Absolutley fantastic,it has transformed our embryo site, we use it every where as a data centre. Master list on the top and linked items in tabs on the bottom.
    Have noticed today when trying to deploy the {} braces mess up the content deployment thro central admin.

  7. Also I am trying to implement the easy tabs to use the Jquery scrollable and it will not accept it for the life of me..

  8. –It was making my onmouseover and selected nav across the main navigation lose animation. I found the culprit. multiple instances of an item [1], [2] makes the tabs go frizzy… also it does not like Link summary(s) that are imported… trying to find out why…

    –Oh snap! You got it to work with the up down scroll! grrr! I am trying to do the slide side to side on the horizontal approach… I think it may be something with the easy tabs scripting?? I am wanting it to transition from tab(0) tab(1) etc… sliding left to right like on the jquery demo page of tabs.

    • Kris, is your scrollable working when you remove the Easy Tabs?

      The Easy Tabs only modify the page layout, they should not interfere with the content of each Web Part.

      • Ok so the funny thing is this; Your easytabs + the js/jq.scrollable.js! Easy Tabs v3.5?

        I am trying to wrap the scrollable script (very small foot print) onto your existing java… I want the slide to left/right to happen on click of the tab name. Since the tabs are created by the webparts that are on the screen I thought this would be an awesome addition.

        I had it working for like a hot minute then something stopped working or I forgot to save the script changes. CTRL-z is the death of me.

        Hopefully that explains what I am trying to accomplish. You can see on the demo page of the scrollable the left to right of tabs.

        I am so close to finishing this… I will post my findings eventually!

  9. Any suggestions I cannot seem to get them (the tabs) to transistion from left to rigth using webparts as the content of each tab..

  10. I know this doesn’t work with custom webparts, but do you know of a possible workaround that I might be able to use?

    • Larry, it’s difficult to give any advice s it will all depend on the Web Part structure. A custom Web Part that follows the standard SharePoint structure will work with the Easy Tabs.

  11. christophe, thank you for a great tool. We love it here.

    One question, we want to specify which tab to be selected. How can one go about doing that?

    • Well, version 3 (that comes with the online workshop) has this option.

      In v2, this is how the active tab is defined:
      var ActiveTab = TabsTD.getElementsByTagName(“SPAN”)[0]
      Replace 0 with the value you want (1 for the second tab, etc.).

  13. Christophe,
    Sorry it took so long to write back after taking your online class with you and Mark Miller.I was able to deploy the easy tabs today, and tried it with two web parts that had “clickable maps.” The first map worked fine, but the second map was always showing information from the first map. Not exactly sure why this was. BTW, both of the maps were built in Sharepoint designer (not sure if that has anything to do with it). Thanks for the great work!

  14. Cristophe,
    I have the tabbed web parts working well on our TeamSite but each time a tabbed page is refreshed, all of the visible lists/views under the tab flash into view for a second or two before the page is presented in the desired tabbed view. Any thoughts on how to negate this behavior?

    Thank you for your valuable contributions that have benefited this community. Utility is nice, Cristophe, but elegant utility that drives transformation is special. Very cool…

    • Excellent question Kevin.

      First, different browsers have different behaviors. This “flash” should usually go unnoticed in IE, while it is visible in Firefox for example.

      I’ll write a post with a couple solutions to work around this behavior.

  16. Hi, Christoph,
    I downloaded the easy tabs per instructions. In the edit mode I do see the Tabs that get created, and they are correct. But when I exit the edit screen the tabs dissapear.

    Maybe I’m downloading the web part wrong. I download the easy tab and change the extension from XML to dwp. Then I imported it as instructed. I also downloaded it without changing the file extension and it does the same thing.

    I’m sure I’m doing something stupid. Can you help?

    • I looked at your faq on this and changed the appearence from Default to Title and boarder like it said. Still does not view when out of the edit mode.

  17. Hi,
    I am working on sharepoint 2010. Easy tabs webpart is not working in sharepoint 2010. Any thoughts on how to make it work on 2010 would be highly appreciated.

    Thanks in advance

    • Right, the styles and some code have changed in SP 2010. I am working on this and I’ll have an update ready by the time Microsoft releasese SP 2010.

  18. I love the easy tabs and they’ve been very useful to our organization. I have a question about Document Libraries that contain folders. If I enter a folder, it appears the only way to get back to the “root” of the library is to use the “back” function of my browser. In other words, there are no breadcrumbs within the web part. Is this something that can be added by HTML or is there a “tree structure” that can be added to the library?

    thanks in advance,
    Andy

  19. I am using Easy tabs with sharepoint 2007 and its working fine
    but if i use this web part in two different web part zone its duplicate the tabs in the first zone and not working for the second zone please advice as i have to use it in more than zone in the same page

    thank you

  20. This is a great feature. However, I need to be able to click on the webpart to expand into the list. (i.e Allitems.aspx). Is this possible? So my users are able to switch between webparts using the tabs. But they want to click into the calendar title and go to the full featured calendar list to switch views, and do other things.

    Please help!

  21. Chris, I just wanted to thank you for Easy Tabs and your FAQ’s. I used the original version for a while and recently had a problem with DVWP not displaying. Double checked your blog and was going to send you an HTML of my problem, when I saw the FAQ – thought I should check the Chrome setting and sure enough one of the views had NONE. Don’t know how, but thank you for documenting the problem. Nice Work!

  22. Probably a lame questions. I cannot find the .dwp or other file in the download links. They are all just .xml files.
    am I missing anything?

    • Well, .dwp and others are actually xml files, just with a different extension.

      If you’re interested in the Easy Tabs, I’d suggest that you just go to v5 (released this week) and build your own.

  23. I am hoping you know the answer to this problem. I have four webparts. The first three are navigation lists, the fourth is a Content Editor Webpart that contains the Easy Tab code I generated from your webiste.

    All three navigations list get converted to tabs, but only the last one launches and it displays all three lists. Got any ideas?

    Bests
    Tim

  24. Great web part, great work! I got issue with EasyTabs. Page is incorrectly rendered in Chrome, correctly in IE. Page content is three simple webparts, for testing purpose. I start with few paragraphs of Lorem Ipsum in first, duplicated amount in second, triple in third … When critical amount of text is riched Chrome and Safari render page incorrectly, IE doesn’t. Any ideas.

  25. SP 2007 – my first web part is a list web part and when trying to deploy easy tabs with the 3 web parts I have the list web part does not create a tab, it displays every time with tabs of the other two?

Comments are closed.