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

PauseOnMouseOver not working

6 Answers 111 Views

Rotator

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

Peter asked on 06 Oct 2015, 11:04 AM

i have the following issue, i have a very basic page with a rotator on it.

but PauseOnMouseOver doesnt seem to be working, it simply wont pause on mouse over.

i am using the latest version of telerik

fyi the cdn bits is because i use a local version of it, but again thats the latest version.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RotatorPage.aspx.cs" Inherits="EAP.popups.RotatorPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="../site/css/Common.css" rel="stylesheet" type="text/css" />

<link href="../site/css/Header.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function OnClientItemsRequestFailed(sender, eventArgs) {

var errorMessage = eventArgs.get_errorMessage();

eventArgs.set_cancelErrorAlert(true);

}

</script>

</head>

<body style="background-color:white !Important;">

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableEmbeddedjQuery="true">

<CdnSettings TelerikCdn="Enabled" BaseSecureUrl="https://host/cdn/Scripts" BaseUrl="https://host/cdn/Scripts" />

</telerik:RadScriptManager>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="False">

<CdnSettings TelerikCdn="Enabled" BaseUrl="https://host/cdn/Skins" BaseSecureUrl="https://host/cdn/Skins" />

</telerik:RadStyleSheetManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Bootstrap">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" EnablePageHeadUpdate="true">

<div class="rotator-container">

<telerik:RadRotator ID="headlinesRotator" runat="server" ScrollDirection="Left" Width="500"

WrapFrames="true" FrameDuration="1" PauseOnMouseOver="true"

ScrollDuration="8000" Height="15" ItemHeight="15" ItemWidth="250"

CssClass="rotator">

<WebServiceSettings Path="../Services/EclipseService.asmx" Method="GetRotatorData" />

</telerik:RadRotator>

</div>

</telerik:RadAjaxPanel>

</form>

</body>

</html>

6 Answers, 1 is accepted

answered on 09 Oct 2015, 08:26 AM

Hi Peter,

We are aware of a similar to the reported problem in previous versions of our controls, but it has been already fixed (about an year ago). Can you tell us the exact version of the controls you are using at the moment? Can you try to upgrade to the latest version and see whether the problem still occurs on you side?

Looking forward to your reply,
Vessy
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 12 Oct 2015, 03:43 PM

Hi Peter,

We examined the provided code again and noticed that the ScrollDuration property is set to pretty big value, giving the feeling that the scrolling does not stop when the Rotator is hovered. What actually happens though, is that by design the rotation stops when the currently showing item (the last one) i fully shown, so if the scroll duration is big this will take more time. You can easily test that by hovering over the rotator item and leaving the mouse over it, unless the last item is fully displayed - then the Rotator will be paused.

In order to make the Rotator pause the rotation imediately you will need to give smaller time frame to the Rotator's ScrollDuration property.

Regards,
Vessy
Telerik

answered on 12 Oct 2015, 03:48 PM

Hi Peter,

Just a quick follow-up:

Another option you can consider is to use the Rotator in FromCode type (RotatorType="FromCode"), which will allow you to manually control the items animation. More information is available in the following Rotator sample: http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx

Regards,
Vessy
Telerik