Client API to go to frame by index ?

3 posts, 0 answers
  1. Li Zhou
    Li Zhou avatar
    26 posts
    Member since:
    Nov 2004

    Posted 20 Nov 2008 Link to this post

    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. Jonathan Hunter
    Jonathan Hunter avatar
    27 posts
    Member since:
    Aug 2006

    Posted 21 Nov 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jonathan Hunter
    Jonathan Hunter avatar
    27 posts
    Member since:
    Aug 2006

    Posted 21 Nov 2008 Link to this post

    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.

Back to Top