RadRotator - Random Hanging on Mouseover

7 posts, 0 answers
  1. Justin
    Justin avatar
    8 posts
    Member since:
    Mar 2011

    Posted 17 May 2012 Link to this post

    Good afternoon--

    The RadRotator is working well in a SlideShow / Two Custom Button setup, except at random times on mouseover, the slideshow seems to "hang" for longer than FrameDuration. At this point, the two custom buttons are unresponsive and the next slide does not advance for 5-6 seconds. The slideshow then resumes, and another "hang" will happen at another random time on mouseover.

    Is there something I can change to prevent this behavior?

    Code is provided below.

    Thanks
    -Justin

     

    <div id="notifications">
        <telerik:RadRotator 
            ID="rtrNotifications" 
            runat="server" 
            RotatorType="SlideShow" Height="15" 
            FrameDuration="3000" 
            SlideShowAnimation-Type="Fade"
            SlideShowAnimation-Duration="2000"
            PauseOnMouseOver="true"
            Width="767"
            ItemWidth="767"
            ItemHeight="15"
              
            >
                <ItemTemplate>  
                            <a href='<%# _appRoot %>/secure/notifications/NotificationDetail.aspx?id=<%# Eval("ID").ToString() %>'>
                            <%# System.Web.HttpUtility.HtmlEncode(Eval("Heading").ToString()) %>  
                            </a>
      
        
                         </ItemTemplate
                         <ControlButtons />
                           
        </telerik:RadRotator>
      
    </div>
    <div id="notifyButtons">
    <a href="#" class="rrButtonLeft" style="display:block" onclick="showNextItem(this, $find('<%= rtrNotifications.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;">
                            </a>
    <a href="#" class="rrButtonRight" style="display:block" onclick="showNextItem(this, $find('<%= rtrNotifications.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                            > </a>
    </div>                        
      
      
    <script type="text/javascript">
      
        function showNextItem(clickedButton, rotator, direction) {
      
            rotator.showNext(direction);
        }
    </script>

     

     

  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 21 May 2012 Link to this post

    Hi Justin,

    Indeed the animation when using PauseOnMouseOver=true acts inconsistently in certain scenarios. We will need to investigate it in details and work out a predictable behavior. Still for the time being you could try the following workaround:
    (function($, $T, undefined)
    {
        $.extend($T.RadRotator.prototype, {
            resume: function()
            {
                var animation = this._animation;
                if(!animation || !animation._isPlaying)
                {
                    if (this._timeoutPassed || !this._isPaused)
                    {
                        if (animation) {
                            animation.play(true);
                        }
                    }
                    else if (this._isPaused)
                    {
                        //If animation actually is in progress, resume it as well
                        if (animation && animation.get_isActive()) {
                            animation.play();
                        }
                    }
                }
                this._isPaused = false;
            }
        });
    })($telerik.$, Telerik.Web.UI);
    Please, note that this override may still produce unexpected behavior, as we haven't tested it thoroughly. Nevertheless you can give it a try and check if your case has improved.

    Hope this helps.

    All the best,
    Niko
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Justin
    Justin avatar
    8 posts
    Member since:
    Mar 2011

    Posted 21 May 2012 Link to this post

    Hi, Niko--

    Thank you very much for sending a possible solution.

    Unfortunately, when adding the below code, a JavaScript error now appears:

    '$telerik' is undefined

    Please let me know if you have any suggestions for fixing the issue.

    Thanks
    -Justin

    function showNextItem(clickedButton, rotator, direction) {
        rotator.showNext(direction);
    }
    (function ($, $T, undefined) {
        $.extend($T.RadRotator.prototype, {
            resume: function () {
                var animation = this._animation;
                if (!animation || !animation._isPlaying) {
                    if (this._timeoutPassed || !this._isPaused) {
                        if (animation) {
                            animation.play(true);
                        }
                    }
                    else if (this._isPaused) {
                        //If animation actually is in progress, resume it as well 
                        if (animation && animation.get_isActive()) {
                            animation.play();
                        }
                    }
                }
                this._isPaused = false;
            }
        });
    })($telerik.$, Telerik.Web.UI);
  5. Justin
    Justin avatar
    8 posts
    Member since:
    Mar 2011

    Posted 21 May 2012 Link to this post

    Niko--

    For some unknown reason, the Telerik.Web.UI DLL in Visual Studio had reverted to a 2011 version. After updating the DLL back to 2012.1.411.40 and recompiling, the JavaScript error went away.

    Unfortunately, the hanging on mouseover issue still exists, even with the override function.

    Do you by chance have any other suggestions?

    Thanks
    -Justin
  6. Niko
    Admin
    Niko avatar
    387 posts

    Posted 22 May 2012 Link to this post

    Hello Justin,

    Having this workaround the time the frame stays unchanged is equal the frame duration time of the RadRotator. You can see this through the video I have recorded - http://screencast.com/t/h78nTaC0. This should be the correct behavior of the control.

    Hope this helps.


    Kind regards,
    Niko
    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.
  7. druffyw
    druffyw avatar
    2 posts
    Member since:
    Jul 2011

    Posted 14 Nov 2012 Link to this post

    Hi,

    Did the suggested workaround fix the issue for you Justin ?

    And, Niko, is there a permanent fix on its way and if so when ?

    Best Regards

    Thomas
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Nov 2012 Link to this post

    Hi Thomas,

    We need to investigate this behavior further in order to introduce a working solution. Nevertheless, I cannot provide a firm estimate when such a fix will be available. The provided workaround should help you achieve a consistent animation for the time being.

    Kind regards,
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017