Rotator skipping second item when .repaint is used

4 posts, 0 answers
  1. giuseppe
    giuseppe avatar
    3 posts
    Member since:
    Apr 2007

    Posted 15 Sep 2011 Link to this post

    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

    <%@ 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>
     
    <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
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 16 Sep 2011 Link to this post

    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):

    function pageLoad() {
                    var oRotator = $find("<%= rotLatestNews.ClientID  %>");
      
                    if($telerik.isIE6){
                        oRotator.repaint();
                    }
                }

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. giuseppe
    giuseppe avatar
    3 posts
    Member since:
    Apr 2007

    Posted 19 Sep 2011 Link to this post

    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
  5. giuseppe
    giuseppe avatar
    3 posts
    Member since:
    Apr 2007

    Posted 20 Sep 2011 Link to this post

    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!

    .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;
    }
Back to Top