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

Client API to go to frame by index ?

2 Answers 64 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Li Zhou
Top achievements
Rank 1
Li Zhou asked on 20 Nov 2008, 02:20 PM
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

2 Answers, 1 is accepted

Sort by
0
Jonathan Hunter
Top achievements
Rank 2
answered on 21 Nov 2008, 05:12 PM
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.
0
Jonathan Hunter
Top achievements
Rank 2
answered on 21 Nov 2008, 06:38 PM
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
 
<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.

Tags
Rotator
Asked by
Li Zhou
Top achievements
Rank 1
Answers by
Jonathan Hunter
Top achievements
Rank 2
Share this question
or