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

Scrolling with "ButtonsOver" in ajaxToolkit:TabPanel with IE

1 Answer 45 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
petter rakinen
Top achievements
Rank 1
petter rakinen asked on 25 Mar 2010, 09:00 AM
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:
<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  
{  
height143px;   
width610px;  
}  
 
.rrClipRegion  
{  
overflowhidden;   
width610px;   
height143px;   
positionrelative;  
}  
 
.rrItemsList  
{  
left: 0px/* dynamicaly changed on 'MouseOver' */ 
top0px;   
width3660px/* dynamicaly computed */ 
height32px;  /* dynamicaly computed */ 
positionrelative;  
}  
</style> 
Her my relevant HTML
    <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

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 30 Mar 2010, 01:17 PM
Hi Petter,

Since the rotator has been residing in an invisible (display: none) parent, you need to call the rotator's repaint() method, when the second tab is clicked. Please note that, a little timeout is needed before the repaint is called - to allow enough time for the rotator to recalculate its dimensions. This is the code you need to execute when the invisible tab is clicked:

<ajaxToolkit:TabPanel ID="tp_11" runat="server" HeaderText="TabPanel 2" OnClientClick="OnClientClick">
......................

<script type="text/javascript">
 
    //var div_IE_Fix = rotator.get_element();
    //div_IE_Fix.style.visibility = 'visible';
    //div_IE_Fix.className = 'RadRotator RadRotator_Default rrNoBorder';
    function OnClientClick(panel, args)
    {
        var rotator = $find("<%=rr_tp_11.ClientID %>");
        setTimeout(function() { rotator.repaint(); }, 10);
    }
</script>



Kind regards,
Pero
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
Tags
Rotator
Asked by
petter rakinen
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or