AjaxControlToolkit’s TabContainer: Navigation Buttons With Scroll Header

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