Play, Pause, Step Forward, Step Backward

2 posts, 0 answers
  1. Jason Heine
    Jason Heine avatar
    16 posts
    Member since:
    Apr 2010

    Posted 06 Jan 2011 Link to this post

    Hello Telerik Community,

    I am attempting to get the RadRotator to work with some Client API.

    Everything works except there is a minor bug that I can't figure out what I am doing wrong.

    I have the following Rotator Control:

    <telerik:RadRotator runat="server" ID="imageSlider" RotatorType="AutomaticAdvance"
                            ScrollDirection="Left" FrameDuration="300" ScrollDuration="1" Width="640px" ItemWidth="640px"
                            Height="640px" ItemHeight="640px" PauseOnMouseOver="False"  OnClientLoad="onRotatorLoadHandler" >
                            <ItemTemplate>
                                <asp:Image ID="Image1" ImageUrl='<%# "~/" + Eval("Path") %>' runat="server" />
                            </ItemTemplate>
                        </telerik:RadRotator>

    Now, i have the following buttons:

    <table>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="cmdStepBack" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/first.png"
                                        OnClientClick="return stepBackward();" ToolTip="Step Backwards" />
                                </td>
                                <td>
                                    <asp:ImageButton ID="cmdPause" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/pause.png"
                                        OnClientClick="return pauseRotator();" ToolTip="Pause Animation" />
                                    <asp:ImageButton ID="cmdPlay" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/play.png"
                                        OnClientClick="return startRotator();" Style="display: none;" ToolTip="Play Animation" />
                                </td>
                                <td>
                                    <asp:ImageButton ID="cmdStepForward" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/last.png"
                                        OnClientClick="return stepForward();" ToolTip="Step Forward" />
                                </td>
                            </tr>
                        </table>

    And finally, I have the following javascript:

    <script language="javascript" type="text/javascript">
                var oRotator;
                function onRotatorLoadHandler(sender, args) {
                    oRotator = sender;
                }
     
                function pauseRotator() {
                   
                    document.getElementById("cmdPause").style.display = "none";
                    document.getElementById("cmdPlay").style.display = "";
     
                    oRotator.pause();
     
                    return false;
                }
     
                function startRotator() {
                   
                    document.getElementById("cmdPause").style.display = "";
                    document.getElementById("cmdPlay").style.display = "none";
     
                    oRotator.resume();
                    return false;
                }
     
                function stepBackward() {
                    oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
                    pauseRotator();
                    return false;
                }
     
                function stepForward() {
                    oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                    pauseRotator();
                    return false;
                }
     
            </script>

    So, when I click on Play/Pause, it works just fine and dandy. No issues.

    However, when I click on stepForward or stepBackward, I have to call showNext then pause the rotator in order for it to work (this is while the animation is going -- there is a different issue when i pause it).

    When I pause the animation first, and then click on stepForward/Back it does not work at all.

    If i don't pause the animation (while it is playing) after calling showNext it does not work.

    Any thoughts how i can click on showNext(either direction) and have it pause the animation and step forward/back without jumping through hoops?

    Thanks,

    Jason
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 12 Jan 2011 Link to this post

    Hello Jason,

    I just added the start() method to the stepBackward and stepForward functions and this fixed the problem on my side:

    function stepBackward() {
        oRotator.start();
        oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
        pauseRotator();
        return false;
    }
     
    function stepForward() {
        oRotator.start();
        oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
        pauseRotator();
        return false;
    }

    For your convenience I have attached my test project. You can also test by commenting out the pauseRotator() function in the stepBackward and stepForward functions.

    Best regards,
    Rumen
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top