Client API to go to frame by index ?

[Li Zhou]

I am wondering if there is any way to go to a specific frame by index on client side?
One example is at http://www.forbes.com/ where you can mouse hover the number 1,2,3,4,5 to see the specific frame.

Thanks

[Jonathan Hunter]

This would be a very beneficial functionality I think. I was looking for it earlier and was surprised I could not find it. As of right now, I'm trying to create a JavaScript workaround. If I find any success, I'll post the code.

[Jonathan Hunter]

Okay, here is what I was able to come up with. It's not perfect due to the lack of client side API, and you might need to tweak it a bit for your needs, but hopefully this helps.

Javascript:

<script language="javascript" type="text/javascript">
    var CURRENT_FRAME = 0;
    var SWITCH_VALUE = 1;
    var ROTATOR_DIRECTION = Telerik.Web.UI.RotatorScrollDirection.Left;

    function ShowFrame(id)
    {
        if(CURRENT_FRAME == id) { return; }
        else if(CURRENT_FRAME < id)
        {
            SWITCH_VALUE = 1;
            ROTATOR_DIRECTION = Telerik.Web.UI.RotatorScrollDirection.Left;
        }
        else
        {
            SWITCH_VALUE = -1;
            ROTATOR_DIRECTION = Telerik.Web.UI.RotatorScrollDirection.Right;
        }

        var cnt = 0;
        for(var i = CURRENT_FRAME; i != id; i += SWITCH_VALUE)
        {
            setTimeout("SimpleIncrement()",(cnt * 80));
            cnt++;
        }
    }

    function SimpleIncrement()
    {
        $find('<%=RadRotator1.ClientID%>').showNext(ROTATOR_DIRECTION);
        CURRENT_FRAME += SWITCH_VALUE;
    }
</script>

HTML:

<div><span onclick="ShowFrame(0);">Index 0</span></div>
<div><span onclick="ShowFrame(1);">Index 1</span></div>
<div><span onclick="ShowFrame(2);">Index 2</span></div>
<div><span onclick="ShowFrame(3);">Index 3</span></div>
<div><span onclick="ShowFrame(4);">Index 4</span></div>

<p style="display: none;"><asp:Button ID="leftButton" runat="server" Text="Left" /> | <asp:Button ID="rightButton" runat="server" Text="Right" /></p>

<telerik:RadRotator ID="RadRotator1" runat="server" Height="300px" Width="500px" ItemHeight="300px" ItemWidth="500px" RotatorType="SlideShowButtons" ScrollDirection="Left,Right" SlideShowAnimation-Type="Fade">
    <ItemTemplate>
        <%# Eval("Name")%>
    </ItemTemplate>
    <ControlButtons LeftButtonID="leftButton" RightButtonID="rightButton" />
</telerik:RadRotator>

I used a Rotator setup based on the SlideShow example and since I didn't want the buttons shown, I just threw them in a <p></p> set and hid them.

The javascript creates a set of setTimeout()s that will instigate the showNext() client-side function in a progressive order so that they all fire off. Apparently you can't call the showNext() in a rapid manner because it'll just cancel itself out. I tested this on FireFox and IE7 and a 80 milisecond delay was the lowest I tried that allowed it to work in both.

Hope this helps!

Notes for Telerik:
The Rotator's contents lose their styling in IE7 when the slide is changed.
When I brought this up in Opera 9.52 the rotator did NOT function at all. I didn't do any extensive testing regarding this though.