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]);

})();

  • Please let me know if somebody has solution? – Dheeraj Jul 27 '16 at 17:33
  • I would suggest reformatting your code sample here so that it is more readable. – Dylan Cristy Jul 27 '16 at 18:00
  • I have formatted it but I am not sure why it is not affecting – Dheeraj Jul 28 '16 at 5:37
  • DOes anyone have an idea how to do it?splitting tabs into two rows? – Dheeraj Jul 28 '16 at 8:53
  • DOes anyone have an idea how to do it?splitting tabs into two rows? – Dheeraj Jul 28 '16 at 14:06
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!

  • I have tried it..but it is displaying all the tabs in different rows – Dheeraj Jul 30 '16 at 3:42
  • Isnt that what you asked for? What do you want it to look like? – T0t3sMcG0t3s Jul 30 '16 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 – Dheeraj Aug 3 '16 at 8:54
  • I need to display 14 webparts into rowed tabscript – Dheeraj Aug 3 '16 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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