Easy Tabs: any issues to report?

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;}