Hello,
I have several issues (CSS and javascript) when I use RadRotator in a TabPanel.
I use TabContainer from the Ajax Toolkit (and I would like to keep it).
The RadRotator works as exepected in the first TabPanel, but hidden in the second.
I fixed it with some JS and CSS:
Her my relevant HTML
Is it possible to overwrite the 'MouseOver' effect in JS to get it works as it should be?
Thanks for any suggestions
Regards
I have several issues (CSS and javascript) when I use RadRotator in a TabPanel.
I use TabContainer from the Ajax Toolkit (and I would like to keep it).
The RadRotator works as exepected in the first TabPanel, but hidden in the second.
I fixed it with some JS and CSS:
<script language="javascript"> |
var div_IE_Fix = document.getElementById('rrInTheSecondTabPanel'); |
div_IE_Fix.style.visibility = 'visible'; |
div_IE_Fix.className = 'RadRotator RadRotator_Default rrNoBorder'; |
</script> |
<style type="text/css"> |
.rrRelativeWrapper |
{ |
height: 143px; |
width: 610px; |
} |
.rrClipRegion |
{ |
overflow: hidden; |
width: 610px; |
height: 143px; |
position: relative; |
} |
.rrItemsList |
{ |
left: 0px; /* dynamicaly changed on 'MouseOver' */ |
top: 0px; |
width: 3660px; /* dynamicaly computed */ |
height: 32px; /* dynamicaly computed */ |
position: relative; |
} |
</style> |
<ajaxToolkit:TabContainer ID="TabContainer" runat="server" ActiveTabIndex="0"> |
<ajaxToolkit:TabPanel ID="tp_10" runat="server" HeaderText="TabPanel 1"> |
<ContentTemplate> |
<div class="SlideShow_Misc_Wrapper"> |
<asp:Image ID="SSArrowLeft_tp_10" ImageUrl="~/images/SSArrowLeft_on.png" AlternateText="right" runat="server" CssClass="SSArrowLeft" /> |
<div class="SlideShow_Misc_Content"> |
<telerik:RadRotator ID="rr_tp_10" runat="server" DataSourceID="xdsTab1" Width="610" Height="143" FrameDuration="1" RotatorType="ButtonsOver"> |
<ItemTemplate> |
<div class="SlideShowElement"> |
<div style="height:40px; overflow:hidden;"><%#XPath("Description")%></div> |
</div> |
</ItemTemplate> |
<ControlButtons LeftButtonID="SSArrowLeft_tp_10" RightButtonID="SSArrowRight_tp_10" /> |
</telerik:RadRotator> |
<asp:XmlDataSource ID="xdsTab1" XPath="XML/stuff" runat="server"></asp:XmlDataSource> |
</div> |
<asp:Image ID="SSArrowRight_tp_10" ImageUrl="~/images/SSArrowRight_on.png" AlternateText="right" runat="server" CssClass="SSArrowRight" /> |
</div> |
</ContentTemplate> |
</ajaxToolkit:TabPanel> |
<ajaxToolkit:TabPanel ID="tp_11" runat="server" HeaderText="TabPanel 2"> |
<ContentTemplate> |
<div class="SlideShow_Misc_Wrapper"> |
<asp:Image ID="SSArrowLeft_tp_11" ImageUrl="~/images/SSArrowLeft_on.png" AlternateText="right" runat="server" CssClass="SSArrowLeft" /> |
<div class="SlideShow_Misc_Content"> |
<telerik:RadRotator ID="rr_tp_11" runat="server" DataSourceID="xdsTab2" Width="610" Height="143" FrameDuration="1" RotatorType="ButtonsOver"> |
<ItemTemplate> |
<div class="SlideShowElement"> |
<div style="height:40px; overflow:hidden;"><%#XPath("Description")%></div> |
</div> |
</ItemTemplate> |
<ControlButtons LeftButtonID="SSArrowLeft_tp_11" RightButtonID="SSArrowRight_tp_11" /> |
</telerik:RadRotator> |
<asp:XmlDataSource ID="xdsTab2" XPath="XML/stuff" runat="server"></asp:XmlDataSource> |
</div> |
<asp:Image ID="SSArrowRight_tp_11" ImageUrl="~/images/SSArrowRight_on.png" AlternateText="right" runat="server" CssClass="SSArrowRight" /> |
</div> |
</ContentTemplate> |
</ajaxToolkit:TabPanel> |
Is it possible to overwrite the 'MouseOver' effect in JS to get it works as it should be?
Thanks for any suggestions
Regards