Advertisements
RSS

AjaxControlToolkit’s TabContainer: Navigation Buttons With Scroll Header

26 Jun

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

 

 

Advertisements
 
5 Comments

Posted by on June 26, 2008 in General, Photography

 

Tags: , , , , , , , , ,

5 responses to “AjaxControlToolkit’s TabContainer: Navigation Buttons With Scroll Header

  1. Ali

    July 27, 2008 at 8:32 pm

    Nice article.. Thanks.
    Can u guide how to use this javascript in case of master pages? because javascript needs to be kept in head section. Any help will be appreciated.

     
    • Greg

      July 17, 2009 at 5:39 pm

      In your master page you can define a headercontent section and a maincontent section. Then inside your individual pages you can refer to the headercontent section of your master page and place the javascript inside that section on your individual page.

       
  2. Abdeali

    May 26, 2010 at 11:46 am

    Nice Article.
    I am also looking at how to limit displaying tabs in a limited area like in a excel workbook.
    There if the number of tabs are more , only first few tabs are visible and remaining can be viewed by scrolling through.

     
  3. dilipm

    May 17, 2011 at 7:49 pm

    Thank you very much…Any search across the web for a scrollable tab strip produced all teleriks, component one etc etc on the first 3 to 4 google pages….I somehow stumbled into site. You are a star..Thank you very very much again.

     
    • Ipshita

      May 18, 2012 at 11:48 am

      all my tabs are dynamic and it is all populated in Master page .. i am very new to this . could you please help me out . how to scroll thorugh the tabs .

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: