Client side OnMouseOver stop animation on image

3 posts, 1 answers
  1. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 06 Jun 2012 Link to this post

    I have a FromCode Rotator that I'm using to scroll through several images, and then repeat itself. Eventually, some of the pictures will be clickable links to other pages.

    I am using the OnClientMouseOver and OnClientMouseOut to mouse over the image, stop on the item, and continue auto scrolling after mouse out.

    However, the image item seems to only stop exactly where the cursor is and on occasion, throw the width off of the next and continuing image items. (See attached image Rotator1.jpg) Note that the images scroll just fine within their size when no stopping or starting take place with mouseover.

    What I would like for it to do, is to stop on the current image frame while mouseover(wherever the cursor is inside the frame), pause on that frame until mouseout, and continue scrolling to the next image frame.

    Here is my markup.

    <asp:Content ID="LandingHeader" runat="server" ContentPlaceHolderID="MainHeaderContent">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Width="825" Height="725" KeepInScreenBounds="True" Behaviors="Close" Animation="FlyIn" Modal="True" EnableEmbeddedSkins="True" EnableEmbeddedBaseStylesheet="True">
                <telerik:RadWindow ID="PopUp" runat="server" NavigateUrl="PopUpMockUp.aspx">
            <script type="text/javascript">
                // RadWindow
                function ShowExisting1()
                    window.radopen(null, "PopUp");
    //          function OnClientLoad(sender, eventArgs)
    //            {
    //                sender.set_scrollDuration(500);
    //                sender.start();
    //            }
                function OnClientLoad(rotator, args)
                    if (!rotator.autoIntervalID)
                        rotator.autoIntervalID = window.setInterval(function ()
                        }, rotator.get_frameDuration());
                function OnClientMouseOver(rotator)
                function OnClientMouseOut(rotator)
        <div style=" margin-left: 475px;">
        <telerik:RadRotator RotatorType="FromCode" ID="RadRotator1" runat="server"
            Width="590" ItemWidth="590" ScrollDirection="Left, Right"
                Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
            ScrollDuration="1000"   SkinID="WebBlue"
                BorderStyle="None"  OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500">
                <asp:Image ID="Image1" Width="590" Height="275" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />
  2. Answer
    Slav avatar
    1351 posts

    Posted 11 Jun 2012 Link to this post

    Hello Geoff,

    You can use the methods startRotator and stopRotator from the online demo Client-side API in order to start and stop the RadRotator control according to the position of the cursor. It appears that you have already used the code of the method startRotator to start the scrolling of the items when the rotator control is initialized. For your convenience I have attached a page that uses a modified version of your sample code, including the suggested solution. Please use it as a reference for incorporating the feature into your actual project.

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. DevCraft R3 2016 release webinar banner
  4. Geoff
    Geoff avatar
    27 posts
    Member since:
    May 2012

    Posted 11 Jun 2012 Link to this post

    Great! Thank you very much Slav! Doing exactly what I wanted it to now.
Back to Top