This is a migrated thread and some comments may be shown as answers.

Rotate Selected Tab with Javascript

2 Answers 62 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
DTech
Top achievements
Rank 1
DTech asked on 08 Aug 2012, 12:26 AM
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 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 08 Aug 2012, 04:28 AM
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.
0
DTech
Top achievements
Rank 1
answered on 08 Aug 2012, 05:58 AM
This works great, but how do I stop the rotating once the user clicks on a tab?
Tags
TabStrip
Asked by
DTech
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
DTech
Top achievements
Rank 1
Share this question
or