RadRotator - Random Hanging on Mouseover

[Justin]

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>

 

 

[Niko]

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

[Justin]

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);

[Justin]

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

[Niko]

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

[druffyw]

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

[Slav]

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