+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Rotator in slideshow mode advances onmouseout

Rotator in slideshow mode advances onmouseout

9 posts, 1 answered
  1. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    05 Apr 2011
    Link to this post
    Hi,

    I created an user control which uses the Telerik RadRotator to rotate through some items. I am using the version of the Telerik controls supplied with SF 3.7 SP 3 which is 2010.1.309.35 according to the source code.

    On the http://www.duxnova.nl website I set up this user control to display six images on the home page in slide show mode. For some reason when I move the cursor over these images and out again the rotator switches to the next image. I checked the demo pages for the Rotator control on the Telerik website and there this behaviour is not displayed when using the slide show mode.

    Can I deactivate the onmouseover in some way?

    Regards,


    David
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    08 Apr 2011
    Link to this post
    Hellol,

    Generally you can subscribe for
    • OnClientMouseOver - raised when the mouse hovers over an item
    • OnClientMouseOut - raised after the mouse leaves an item
    and cancel the events e.Cancel = true


    another option would be using sender.stop which should stop the rotation.

    Greetings,
    Ivan Dimitrov
    the Telerik team

  3. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    11 Apr 2011
    Link to this post
    Hi Ivan,

    I tried this but had no luck. I tried several ways to do the same. e.Cancel cause a javascript error. Using sender.Cancel or args.Cancel had no effect. I checked that I did event subscription correctly by adding an alert to one of the function. The alert was shown when expected. I included the code of my user control below.

    Regards,


    David

    <%@ control language="C#" autoeventwireup="true" codefile="SpotlightRotator.ascx.cs" inherits="SpotlightRotator" %>
      
    <%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
      
    <script language="javascript" type="text/javascript">
        function mouseout(sender, args) {
            args.Cancel = true;
        }
        function mouseover(sender, args) {
            args.Cancel = true;
        }
    </script>
      
    <asp:Panel ID="pnlSpotlight" runat="server" CssClass="spotlightRotatorContainer">
        <div class="spotlightRotatorTop">
            <!-- -->
        </div>
          
        <div class="spotlightRotatorTitle">
            <asp:literal id="litTitle" runat="server"></asp:literal>
        </div>
          
        <telerik:radrotator id="RadRotator1" runat="server" cssclass="spotlightRotator" onclientmouseout="mouseout" onclientmouseover="mouseover">
            <itemtemplate>
                <div id="spotlight" runat="server" class="spotlight">
                    <div id="spotlightTitle" runat="server" class="spotlightTitle">
                        <asp:literal id="litTitle" runat="server"></asp:literal>
                        <asp:hyperlink id="hlSpotlightTitle" runat="server" />
                    </div>
                      
                    <div id="spotlightSubtitle" runat="server" class="spotlightSubtitle">
                        <asp:literal id="litSubtitle" runat="server"></asp:literal>
                    </div>
                      
                    <div id="spotlightSummary" runat="server" class="spotlightSummary">
                        <asp:literal id="litSummary" runat="server"></asp:literal>
                    </div>
                      
                    <div id="spotlightLink" runat="server" class="spotlightLink">
                        <asp:hyperlink id="hlSpotlightLink" runat="server" />
                    </div>
                      
                    <asp:Image id="spotlightImage" runat="server" class="spotlightImage"></asp:Image>
                </div>
            </itemtemplate>
        </telerik:radrotator>
          
        <div id="spotlightRotatorButtons" runat="server" class="spotlightRotatorButtons">
            <ul>
                <li id="liStopRotator" runat="server">
                    <a href="#" onclick="stopRotator(this, $find('<%= RadRotator1.ClientID %>')); return false;" class="stopSelected">
                        <asp:literal id="rotatorButtonsStop" runat="server" text="<%$Resources:buttonStop %>"></asp:literal>
                    </a>
                </li>
                <li id="liStartRotator" runat="server">
                    <a href="#" onclick="startRotator(this, $find('<%= RadRotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" class="start">
                        <asp:literal id="rotatorButtonsStart" runat="server" text="<%$Resources:buttonStart %>"></asp:literal>
                    </a>
                </li>
                <li id="liLeftRotator" runat="server">
                    <a href="#" onclick="showNextItem(this, $find('<%= RadRotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" class="left">
                        <asp:literal id="rotatorButtonsLeft" runat="server" text="<%$Resources:buttonLeft %>"></asp:literal>
                    </a>
                </li>
                <li id="liRightRotator" runat="server">
                    <a href="#" onclick="showNextItem(this, $find('<%= RadRotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Right); return false;" class="right">
                        <asp:literal id="rotatorButtonsRight" runat="server" text="<%$Resources:buttonRight %>"></asp:literal>
                    </a>
                </li>
            </ul>
        </div>
          
        <div id="spotlightRotatorPager" runat="server" class="spotlightRotatorPager">
            <asp:radiobuttonlist id="rotatorPagerRadioButtonList" runat="server">
            </asp:radiobuttonlist>
        </div>
          
        <div class="spotlightRotatorBottom">
            <!-- -->
        </div>
    </asp:Panel>
      
    <asp:panel id="pFeedback" runat="server" cssclass="cms_feedback">
        <p>The spotlight rotator is not visible in edit mode.</p>
        <p>Feedback:</p>
        <asp:bulletedlist id="FeedbackList" runat="server">
        </asp:bulletedlist>
    </asp:panel>
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    14 Apr 2011
    Link to this post
    Hi David van Geel,

    Can you please show us the whole control code we are missing JavaScript methods from the definition of the start/stop buttons.

    All the best,
    Radoslav Georgiev
    the Telerik team

  5. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    14 Apr 2011
    Link to this post
    Hi Radoslav,

    I have put a zip file on a accessible place on the Internet with all the necessary files. Including js, css and resx files and also including the necessary designers. The zip file contains the directory structure as expected by the code.

    Regards,


    David

    Location zip file: http://sitefinity.estate.nl/example_code.zip
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    20 Apr 2011
    Link to this post
    Hi David van Geel,

    I cannot run the control as I am missing a class Output/its assembly probably.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

  7. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    21 Apr 2011
    Link to this post
    Hi Radoslav,

    I have updated the zip file. It now contains the Estate.SitefinityFunctions.dll that contains the Output class you mentioned.

    Regards,


    David
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 Apr 2011
    Link to this post
    Hello David van Geel,

    Thank you for providing all the necessary code.

    I have tested your control both on the version of Sitefinity you have listed which uses RadControls for ASP.NET Ajax 2010.1.309.35 and on Sitefinity 3.7 SP4 which uses RadControls for ASP.NET Ajax 2010.2.826 (Q2 SP1). The problem reproduces in the version you have listed that you are using, however I was unable to reproduce the version with the newer version of the controls suite. I have double checked with the team which is responsible for building the RadRotator and they have confirmed that this is due to a bug in your version of RadControls for ASP.NET Ajax. I would suggest that you upgrade the controls suite to a newer version.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Answered
  9. David van Geel
    David van Geel avatar
    59 posts
    Registered:
    19 Aug 2009
    29 Apr 2011
    Link to this post
    Thanks, Radoslav!

    That has solved the issue for me.

    Regards,


    David
Register for webinar
9 posts, 1 answered