Hi,
I'm having a problem with the RadRotator when using the .repaint method. I'm rotating though 5 items, using AutomaticAdvance, but the second item in the list is skipped, i.e. it goes straight from item 1 to item 3 and then through items 4 and 5. Item 2 is not shown.
However, on subsequent loops, item 2 is shown.
If I remove the .repaint method there is no problem (item 2 is shown the first time around), but I need to use this as the rotator is not displaying on older browsers without it.
I've added a stripped down example of my code below (I'm actually binding to a LinqDataSource in my code, but the behaviour is the same). I'm using version 2011.1.519.40 of Telerik.Web.UI.dll
Any ideas how to fix this?
Thanks,
Alan
I'm having a problem with the RadRotator when using the .repaint method. I'm rotating though 5 items, using AutomaticAdvance, but the second item in the list is skipped, i.e. it goes straight from item 1 to item 3 and then through items 4 and 5. Item 2 is not shown.
However, on subsequent loops, item 2 is shown.
If I remove the .repaint method there is no problem (item 2 is shown the first time around), but I need to use this as the rotator is not displaying on older browsers without it.
I've added a stripped down example of my code below (I'm actually binding to a LinqDataSource in my code, but the behaviour is the same). I'm using version 2011.1.519.40 of Telerik.Web.UI.dll
<%@ Page Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function pageLoad() { var oRotator = $find("<%= rotLatestNews.ClientID %>"); oRotator.repaint(); } </script> </telerik:RadCodeBlock> <div> <telerik:RadRotator runat="server" ID="rotLatestNews" ScrollDirection="Left" RotatorType="AutomaticAdvance" EnableRandomOrder="false" FrameDuration="6000" Width="300px" ItemWidth="300px" Height="450px" ItemHeight="450px" InitialItemIndex="0" WrapFrames="true"> <Items> <telerik:RadRotatorItem> <ItemTemplate>1</ItemTemplate> </telerik:RadRotatorItem> <telerik:RadRotatorItem> <ItemTemplate>2</ItemTemplate> </telerik:RadRotatorItem> <telerik:RadRotatorItem> <ItemTemplate>3</ItemTemplate> </telerik:RadRotatorItem> <telerik:RadRotatorItem> <ItemTemplate>4</ItemTemplate> </telerik:RadRotatorItem> <telerik:RadRotatorItem> <ItemTemplate>5</ItemTemplate> </telerik:RadRotatorItem> </Items> </telerik:RadRotator> </div> </form></body></html>Any ideas how to fix this?
Thanks,
Alan
3 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 16 Sep 2011, 01:51 PM
Hello giuseppe,
If you need to call the repaint method for older browsers, I'm assuming IE6, you could use the $telerik library to detect those browsers and call the repaint method when that check is true. Like so (if it's IE6):
I hope that helps.
If you need to call the repaint method for older browsers, I'm assuming IE6, you could use the $telerik library to detect those browsers and call the repaint method when that check is true. Like so (if it's IE6):
function pageLoad() { var oRotator = $find("<%= rotLatestNews.ClientID %>"); if($telerik.isIE6){ oRotator.repaint(); } } I hope that helps.
0
giuseppe
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2011, 02:09 PM
Hi Kevin,
Thanks for your reply. We've had a further look at things and removed the repaint method and made some changes to the CSS on the page and have now narrowed it down to IE7 only. We can get the rotator to display without a repaint in all browsers (old and new) except for IE7. Even IE6 works!!
If we can't manage to overcome this, we'll use the approach you suggested to only repaint in IE7. It won't be perfect, as the second item will be skipped for IE7 users, but it will do in this case.
Thanks again,
Alan
Thanks for your reply. We've had a further look at things and removed the repaint method and made some changes to the CSS on the page and have now narrowed it down to IE7 only. We can get the rotator to display without a repaint in all browsers (old and new) except for IE7. Even IE6 works!!
If we can't manage to overcome this, we'll use the approach you suggested to only repaint in IE7. It won't be perfect, as the second item will be skipped for IE7 users, but it will do in this case.
Thanks again,
Alan
0
giuseppe
Top achievements
Rank 1
Rank 1
answered on 20 Sep 2011, 10:36 AM
For those who might be interested. We finally figured out what the problem was. There's a bug in IE7 where if you use font-style:italic; inside an element with a float, the entire element will not display. Taking out the font-style:italic; fixes it.
In our case the Rotator is in a div with the CSS class home_content_latestnews (contains float:right). Within the Rotator ItemTemplate we have another div that uses the latestnews_headline_date CSS class (contains font-style:italic). This may be helpful to someone else!
In our case the Rotator is in a div with the CSS class home_content_latestnews (contains float:right). Within the Rotator ItemTemplate we have another div that uses the latestnews_headline_date CSS class (contains font-style:italic). This may be helpful to someone else!
.home_content_latestnews { float:right; margin:0; padding:0px 0px 30px 20px; width:33%; text-align:justify; line-height:1.6em; font-size:12px; border:1px solid white;}.latestnews_headline_date { text-align:left; font-family: verdana, sans-serif; color:#8dc63f !important; font-size:18px; line-height:1.2em; text-align:left; font-style:italic;}