I have a page that contains 2 rotators that I want to move in sync with each other -- when the top one moves, I want that movement to trigger the movement of the bottom one.
I have set up the code to do this except I cannot seem to address the second rotator. I capture the movement of the first, then try to find the second in the control collection and set it's index -- similar to an example on your site. But every time I try to find the second rotator, I find that I have grabbed a "div" control instead.
Can you tell me what I need to do? This needs to run on pages with and without master pages.
I ahve attached 2 related screen captures below from during execution.
Thanks in advance!
Lynn
I have set up the code to do this except I cannot seem to address the second rotator. I capture the movement of the first, then try to find the second in the control collection and set it's index -- similar to an example on your site. But every time I try to find the second rotator, I find that I have grabbed a "div" control instead.
Can you tell me what I need to do? This needs to run on pages with and without master pages.
I ahve attached 2 related screen captures below from during execution.
Thanks in advance!
Lynn
<
body
>
<
script
type
=
"text/javascript"
>
function OnClientItemShown(sender, eventArgs) {
var idx = eventArgs.get_item().get_index();
var oRotator = document.getElementById("<%= RadRotator2.ClientID %>");
alert(oRotator);
oRotator.set_currentItemIndex('1');
}
</
script
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
div
>
<
br
/><
br
/>
<
telerik:RadRotator
runat
=
"server"
DataSourceID
=
"xmlDataSource1"
ID
=
"rotator1"
OnClientItemShown
=
"OnClientItemShown"
ScrollDirection
=
"Left"
SlideShowAnimation-Type
=
"Fade"
RotatorType
=
"SlideShow"
FrameDuration
=
"6000"
Width
=
"955px"
ItemWidth
=
"955px"
Height
=
"398px"
ItemHeight
=
"398px"
>
<
ItemTemplate
>
<
div
class
=
"itemTemplate"
>
<
img
src
=
"<%# XPath("
Image") %>" alt="<%# XPath("Title") %>" style="border: 0px;" />
</
div
>
</
ItemTemplate
>
</
telerik:RadRotator
>
<
br
/><
br
/>
<
div
class
=
"xscrollContainer"
>
<
telerik:RadRotator
runat
=
"server"
DataSourceID
=
"xmlDataSource2"
ID
=
"RadRotator2"
ScrollDirection
=
"Left"
SlideShowAnimation-Type
=
"Fade"
RotatorType
=
"SlideShow"
FrameDuration
=
"6000"
Width
=
"390px"
ItemWidth
=
"390px"
Height
=
"30px"
ItemHeight
=
"30px"
>
<
ItemTemplate
>
<
div
class
=
"itemTemplate"
>
<%# XPath("Title") %>
</
div
>
</
ItemTemplate
>
</
telerik:RadRotator
>
</
div
>
<
br
/><
br
/>
</
div
>
<
asp:XmlDataSource
ID
=
"xmlDataSource1"
runat
=
"server"
DataFile
=
"photos.xml"
></
asp:XmlDataSource
>
<
asp:XmlDataSource
ID
=
"xmlDataSource2"
runat
=
"server"
DataFile
=
"titles.xml"
></
asp:XmlDataSource
>