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

    <telerik:RadTabStrip
                ID="RadTabStrip1" runat="server"
        MultiPageID="RadMultiPage1" SelectedIndex="0" BackColor="#FBFCDD"
                CssClass="RadTabStrip_Default" EnableEmbeddedSkins="False" >
        <Tabs>
            <telerik:RadTab runat="server" Text="News" CssClass="rtsLink" SelectedCssClass="rtsSelected" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Sports" CssClass="rtsLink" SelectedCssClass="rtsSelected">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Weather" CssClass="rtsLink" SelectedCssClass="rtsSelected">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Publications & Photo Galleries" CssClass="rtsLink"  SelectedCssClass="rtsSelected">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
     <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>
    </telerik:RadMultiPage>
    .
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Aug 2012 Link to this post

    Hello,

    Try the following JQuery to achieve your scenario.

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

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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