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.
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
>