Rotate Selected Tab with Javascript

3 posts, 0 answers
  1. DTech
    DTech avatar
    17 posts
    Member since:
    Aug 2009

    Posted 07 Aug 2012 Link to this post

    How do I go about making the tabstrip's selected tab rotate?

    For example, every 3 seconds the selected tab would change from the 1st, to 2nd, 3 seconds later, from 2nd to 3rd, and 3 seconds later, back to the 1st. 

    I hope I didn't overlook anything in the forums or documentation, but I didn't see anything like this

                ID="RadTabStrip1" runat="server"
        MultiPageID="RadMultiPage1" SelectedIndex="0" BackColor="#FBFCDD"
                CssClass="RadTabStrip_Default" EnableEmbeddedSkins="False" >
            <telerik:RadTab runat="server" Text="News" CssClass="rtsLink" SelectedCssClass="rtsSelected" Selected="True">
            <telerik:RadTab runat="server" Text="Sports" CssClass="rtsLink" SelectedCssClass="rtsSelected">
            <telerik:RadTab runat="server" Text="Weather" CssClass="rtsLink" SelectedCssClass="rtsSelected">
            <telerik:RadTab runat="server" Text="Publications & Photo Galleries" CssClass="rtsLink"  SelectedCssClass="rtsSelected">
     <telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="RadPageView1" runat="server"><uc3:News_Latest ID="News_Latest1" runat="server" NewsTag="General" ShowTop="5" /></telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server"><uc3:News_Latest ID="News_Latest2" runat="server" NewsTag="Sports" ShowTop="5" /></telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView3" runat="server"><asp:Literal
                ID="ltWeather" runat="server"></asp:Literal>
            <br /></telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView4" runat="server"><asp:Literal
                ID="ltPhotos" runat="server"></asp:Literal></telerik:RadPageView>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Aug 2012 Link to this post


    Try the following JQuery to achieve your scenario.

    <script type="text/javascript">
        $(function () {
            var intervalID = setInterval(function () {
                var tabstrip = $find("<%= RadTabStrip1.ClientID %>");
                var i = tabstrip.get_selectedIndex();
                if (i <3) {
                else {
            }, 3000);

    Hope this helps.

  3. DTech
    DTech avatar
    17 posts
    Member since:
    Aug 2009

    Posted 08 Aug 2012 Link to this post

    This works great, but how do I stop the rotating once the user clicks on a tab?
Back to Top