1

I have been using a "tab script" to display multiple lists web parts on a page in "tab format". The script is working fine when there are just a few list web parts, but as the number of web parts increases the resulting page layout is turning out ugly. Can anyone suggest a way to split the tabs view on two or more rows?

Below here is the code I am currently using to implement the tabs

<style type="text/css">
.et-tab {
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; DISPLAY: inline-block; PADDING-LEFT: 20px; FONT-SIZE: 10pt; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; CURSOR: pointer; COLOR: #1b65b1; MARGIN-RIGHT: 5px; PADDING-TOP: 5px; TOP: 1px; HEIGHT: 20px; BACKGROUND-COLOR: #fff
}
.et-activetab {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px;COLOR: #ffffff; MARGIN-RIGHT: 5px;    BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #009900
}
.et-inactivetab {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; COLOR: #009900; MARGIN-RIGHT: 5px
}
.et-separator {
BORDER-TOP-WIDTH: medium; BORDER-LEFT-WIDTH: medium; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 2px; BACKGROUND-COLOR: #666666; BORDER-RIGHT-WIDTH: medium
}
.et-tabrow {
 WHITE-SPACE: nowrap
 }
 .et-offscreen {
 MAX-WIDTH: 1px; MAX-HEIGHT: 1px; POSITION: absolute; TOP: -99999px
}</style>
<script type="text/javascript">
 (function(){
var AP = "", sec = 0, Header = "none", Split = "No", Expand = "", Print = "";
if (document.forms[0].elements["_wikiPageMode.value"] == "true" || document.forms[0].elements["MSOLayout_InDesignMode"].value == "1") {
    return;
}

var el = document.getElementsByTagName("SCRIPT"), p = el[el.length - 1], sT, a, sep, tabRow;

do {
    p = p.parentNode; sT = p.innerHTML.split("MSOZoneCell_WebPart");
} while (sT.length < 4 && p.parentNode.id != "MSO_ContentTable")

if (p.getAttribute("contenteditable") == "true") {
    return;
}

if (p.nodeName == "DIV") {
    sep = document.createElement("div"); p.insertBefore(sep, p.firstChild); tabRow = document.createElement("div"); p.insertBefore(tabRow, p.firstChild);
}
else {
    sep = document.createElement("td"); var sepTR = document.createElement("tr"); sepTR.appendChild(sep); tabRow = document.createElement("td"); var tabTR = document.createElement("tr"); tabTR.appendChild(tabRow); if (p.nodeName == "TBODY") { p.insertBefore(sepTR, p.firstChild); p.insertBefore(tabTR, p.firstChild); } else if (p.nodeName == "TR") { p.parentNode.insertBefore(tabTR, p); p.parentNode.insertBefore(sepTR, p); } else { return; }
}
sep.className = "et-separator"; tabRow.className = "et-tabrow";

var children = p.childNodes; p = p.parentNode; var etRoot = [], etHeader = [], etTab = [], tabsID = [];

for (var j = 0; j < children.length; j++) {
    try {
        var d = children[j].getElementsByTagName("td");
        for (i = 0; i < d.length; i++) {
            if (d[i].id.indexOf("WebPartTitle") == 0) {
                var WPid = d[i].id.replace(/WebPartTitle/, "");
                if (d[i].innerHTML.indexOf("(Hidden)") == -1) {
                    var up = d[i]; while (up != children[j]) {
                        if (up.parentNode.innerHTML.indexOf('id=WebPart' + WPid + ' ') >= 0 || up.parentNode.innerHTML.indexOf('id="WebPart' + WPid + '" ') >= 0) {
                            WPid = "et" + WPid;
                            etHeader[WPid] = up;
                            etRoot[WPid] = children[j];
                            etTab[WPid] = d[i].getElementsByTagName("span")[0].cloneNode(true);
                            etTab[WPid].id = WPid;
                            etTab[WPid].className = "et-tab et-inactivetab";
                            etTab[WPid].onclick = function () { activateTab(this); };
                            tabRow.appendChild(etTab[WPid]);
                            tabsID.push(WPid);
                            break;
                        }
                        up = up.parentNode;
                    }
                }
            }
        }
    }
    catch (e) { }
}
var Tabs = tabRow.getElementsByTagName("span"), TabCount = Tabs.length;
if (Split == "Yes") {
    var sd = document.createElement("div"), index = Math.floor(TabCount * 0.5);
    tabRow.insertBefore(sd, Tabs[index]);
}
if (AP.length && sec > 0) {
    sec = sec * 1000; interval = "";
    a = document.createElement("span"); a.innerHTML = "|>";
    a.className = "et-tab et-inactivetab";
    a.onclick = function () {
        if (interval == "") {
            this.innerHTML = "||"; interval = window.setInterval(function () { Autoplay(); }, sec)
        }
        else {
            this.innerHTML = "|>"; window.clearInterval(interval); interval = ""
        }
    };
    tabRow.appendChild(a);
    var Autoplay = function () {
        for (i = 0; i < TabCount; i++) if (Tabs[i].className == "et-tab et-activetab") {
            var j = (i + 1) % TabCount; activateTab(Tabs[j]); break
        }
    };
    if (AP == "Play") {
        a.innerHTML = "||";
        interval = window.setInterval(function () { Autoplay(); }, sec)
    };
}
if (Expand.length) {
    a = document.createElement("span"); a.innerHTML = Expand;
    a.className = "et-tab et-inactivetab";
    a.onclick = function () {
        for (i = 0; i < tabsID.length; i++) {
            etTab[tabsID[i]].className = "et-tab et-inactivetab";
            etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/et-offscreen/g, "");
            etRoot[tabsID[i]].style.pageBreakAfter = "always";
            etHeader[tabsID[i]].style.display = "";
        }
    };
    tabRow.appendChild(a);
}
if (Print.length) {
    a = document.createElement("span");
    a.innerHTML = Print; a.className = "et-tab et-inactivetab";
    a.onclick = function () {
        this.style.display = "none";
        var f = document.getElementById("s4-workspace") || document.getElementsByTagName("body")[0], ed = p.parentNode.insertBefore(document.createElement(p.nodeName), p);
        f.appendChild(p);
        for (j = 0; j < f.childNodes.length - 1; j++) {
            try {
                f.childNodes[j].className += " et-offscreen";
            }
            catch (e) { }
        }
        a = document.createElement("span");
        a.innerHTML = "Back to Page";
        a.className = "et-tab et-inactivetab";
        a.onclick = function () {
            this.previousSibling.style.display = "inline-block";
            this.parentNode.removeChild(this);
            ed.parentNode.insertBefore(p, ed);
            ed.parentNode.removeChild(ed);
            for (j = 0; j < f.childNodes.length; j++) {
                try {
                    f.childNodes[j].className = f.childNodes[j].className.replace(/\s*et-offscreen/g, "");
                }
                catch (e) { }
            }
        };
        tabRow.appendChild(a);
    };
    tabRow.appendChild(a);
}
function activateTab(t) {
    document.cookie = tabsID.join("_") + "=" + t.id + ";path=/";
    for (i = 0; i < tabsID.length; i++) {
        etHeader[tabsID[i]].style.display = Header; if (t.id == tabsID[i]) {
            etTab[tabsID[i]].className = "et-tab et-activetab";
            etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g, "");
        }
        else { etTab[tabsID[i]].className = "et-tab et-inactivetab"; etRoot[tabsID[i]].className += " et-offscreen"; }
    }
} var m = GetCookie(tabsID.join("_")) ? GetCookie(tabsID.join("_")) : tabsID[0];
activateTab(etTab['etWPQ8']);
//activateTab(etTab[m]);

})();

5
  • Please let me know if somebody has solution?
    – DK93
    Jul 27, 2016 at 17:33
  • I would suggest reformatting your code sample here so that it is more readable. Jul 27, 2016 at 18:00
  • I have formatted it but I am not sure why it is not affecting
    – DK93
    Jul 28, 2016 at 5:37
  • DOes anyone have an idea how to do it?splitting tabs into two rows?
    – DK93
    Jul 28, 2016 at 8:53
  • DOes anyone have an idea how to do it?splitting tabs into two rows?
    – DK93
    Jul 28, 2016 at 14:06

1 Answer 1

0

Try changing .et-tab class to this

.et-tab { BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 20px; FONT-SIZE: 10pt; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; CURSOR: pointer; COLOR: #1b65b1; MARGIN-RIGHT: 5px; PADDING-TOP: 5px; TOP: 1px; HEIGHT: 20px; BACKGROUND-COLOR: #fff }

I just changed the display to block instead of inline-block. Hope that does the trick!

4
  • I have tried it..but it is displaying all the tabs in different rows
    – DK93
    Jul 30, 2016 at 3:42
  • Isnt that what you asked for? What do you want it to look like? Jul 30, 2016 at 5:19
  • I want it to split in only in two rows..But when I use display:block..It is displaying each webpart in each row..I have 14 webparts..so it is displaying in 14 rows
    – DK93
    Aug 3, 2016 at 8:54
  • I need to display 14 webparts into rowed tabscript
    – DK93
    Aug 3, 2016 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.