I used the code from Matt Berseth to create navigation buttons to change the selected tabs, but as I was using the tabs in a Left frame in the Web application; I did not have enough space to display all the tabs headers, the navigation buttons was working fine but the headers was invisible, so I changed the code to add a horizontal scrolling for the Header. I am creating dynamic tabs so I do not know the required value of the scroll as I do not know the width of the headers, and so I am using (_header.offsetWidth) for the active tab as a scroll value
HTML code:
<cc2:TabContainer AutoPostBack=”false” style=”Z-INDEX: 102; LEFT: 0px; POSITION: absolute; TOP: 18px” ID=”TabContainer1″ runat=”server” Width=”100%”>
</cc2:TabContainer>
<asp:ImageButton ImageUrl=”images/scrollnext.gif” id=”tabNext” ToolTip=”Next tab” OnClientClick=”onNavigate(true); return false;” style=”Z-INDEX: 102; POSITION: absolute; TOP: 0px; left:20px “ runat=”server” />
<asp:ImageButton ImageUrl=”images/scrollpre.gif” id=”tabPrev” ToolTip=”Previous tab” OnClientClick=”onNavigate(false); return false;” style=”Z-INDEX: 102; POSITION: absolute; TOP: 0px; “ runat=”server” />
JavaScript functions:
function onNavigate(isMoveNext)
{
// find the behavior for the tab control
var tabs = $find(‘TabContainer1′);
// figure out what the total number of tabs are
var totalNumOfTabs = tabs.get_tabs().length;
// if we don’t have any tabs, just return
if(totalNumOfTabs > 0)
{
var newTabIndex;
var currentTabIndex = tabs.get_activeTabIndex();
if(isMoveNext)
{
// wrap around to the begining
if(currentTabIndex + 1 == totalNumOfTabs)
{
newTabIndex = 0;
}
else
{
newTabIndex = currentTabIndex + 1;
}
}
else
{
// wrap around to the end
if(currentTabIndex – 1 < 0)
{
newTabIndex = totalNumOfTabs – 1;
}
else
{
newTabIndex = currentTabIndex – 1
}
}
tabs.set_activeTabIndex(newTabIndex);
var aTab = tabs.get_activeTab()
if(isMoveNext)
{
if (newTabIndex == 0)
{
document.getElementById(“TabContainer1_header”).scrollLeft=0;}
else
{
scrollDivLeft(“TabContainer1_header”,aTab._header.offsetWidth);}
}
else
{
if (newTabIndex == totalNumOfTabs – 1)
{
document.getElementById(“TabContainer1_header”).scrollLeft=totalNumOfTabs*aTab._header.offsetWidth;
}
else
{
scrollDivRight(“TabContainer1_header”,aTab._header.offsetWidth);
}
}
}
}
function scrollDivLeft(id,scrollStep)
{
document.getElementById(id).scrollLeft+=scrollStep
}
function scrollDivRight(id,scrollStep)
{
document.getElementById(id).scrollLeft-=scrollStep
}
And this how the header looks like
