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

Client side OnMouseOver stop animation on image

2 Answers 79 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Geoff
Top achievements
Rank 1
Geoff asked on 06 Jun 2012, 07:06 PM
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:RadStyleSheetManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--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" />
        </Scripts>
    </telerik:RadScriptManager>
 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
     
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Width="825" Height="725" KeepInScreenBounds="True" Behaviors="Close" Animation="FlyIn" Modal="True" EnableEmbeddedSkins="True" EnableEmbeddedBaseStylesheet="True">
        <Windows>
            <telerik:RadWindow ID="PopUp" runat="server" NavigateUrl="PopUpMockUp.aspx">
            </telerik:RadWindow>
 
        </Windows>
         
    </telerik:RadWindowManager>
 
        <script type="text/javascript">
            // RadWindow
            function ShowExisting1()
            {              
                window.radopen(null, "PopUp");
            }
 
            //RadRotator
//          function OnClientLoad(sender, eventArgs)
//            {
//                sender.set_scrollDuration(500);
//               
//                sender.start();
//            }
 
            function OnClientLoad(rotator, args)
            {
                if (!rotator.autoIntervalID)
                {
                    rotator.autoIntervalID = window.setInterval(function ()
                    {
                        rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                    }, rotator.get_frameDuration());
                }
            }
 
            function OnClientMouseOver(rotator)
            {
                 
                rotator.stop();
 
            }
 
            function OnClientMouseOut(rotator)
            {
 
                rotator.start();
            }
 
    </script>
     
    <div style=" margin-left: 475px;">
    <telerik:RadRotator RotatorType="FromCode" ID="RadRotator1" runat="server"
        Width="590" ItemWidth="590" ScrollDirection="Left, Right"
            SlideShowAnimation-Type="Fade"
            Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
        ScrollDuration="1000"   SkinID="WebBlue"
            BorderStyle="None"  OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500">
        <ItemTemplate>
            <asp:Image ID="Image1" Width="590" Height="275" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />
        </ItemTemplate>
         
    </telerik:RadRotator>
    </div>
</asp:Content>
 

2 Answers, 1 is accepted

Sort by
0
Accepted
Slav
Telerik team
answered on 11 Jun 2012, 07:52 AM
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,
Slav
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.
0
Geoff
Top achievements
Rank 1
answered on 11 Jun 2012, 02:27 PM
Great! Thank you very much Slav! Doing exactly what I wanted it to now.
Tags
Rotator
Asked by
Geoff
Top achievements
Rank 1
Answers by
Slav
Telerik team
Geoff
Top achievements
Rank 1
Share this question
or