White Background

7 posts, 0 answers
  1. Cade Cote
    Cade Cote avatar
    9 posts
    Member since:
    Mar 2008

    Posted 25 Sep 2008 Link to this post

    I have the new radrotator on a page that I am trying to use. I have the rotator in div tags so has certain formatting. The problem I am having is I cant get the background of the rotator to be transparent. I have tried to change the backcolor to transparent and that did not work. What do I need to do to get it so there is no background. The text and stuff in the control follows the div tags I have them in, but the background stays white no matter what.

    Here is the code I have. Thanks in advance

    <

    div class="rotator_mainimage" style="height: 344px; margin-top: 14px">

    <div style="width: 90%">

    <telerik:RadRotator ID="NewsRotator" runat="server" DataSourceID="xmlDataSource1"

    RotatorType="Buttons" ScrollDirection="Up, Down" Height="351px"

    Width="403px" BorderStyle="None" style="margin-top: 0px"

    FrameDuration="4000">

    <ItemTemplate>

    <div class="rotator_eventtitle" style="text-align: left">

    <%

    #XPath("EventTitle")%>

    </div>

    <div class="rotator_eventdetails" style="text-align: left">

    <%

    #XPath("EventDetails")%>

    </div>

    <div class="rotator_eventdetails_url" style="text-align: left">

    <a href='<%# Xpath("EventDetailsURL") %>' target="_blank">

    More

    </a>

    </div>

    </ItemTemplate>

    </telerik:RadRotator>

    </div>

    </div>

    <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="~/App_Data/NewsRotator.xml"></asp:XmlDataSource>

    </

    div>

  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 25 Sep 2008 Link to this post

    Heya Cade,

    Check out a little ways down in this post, looks like you can override the background with some custom CSS:

    RadRotator customization post

    Hope this was helpful. :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 26 Sep 2008 Link to this post

    It was bugging the heck out of me, so I spent the last half hour figuring out how this works...

    Here is the code to get this to work:

    <style type="text/css">  
          
    .RadRotator_Default .radr_clipRegion  
    {  
        width: 100%;  
        height: 100%;  
             background-color: Transparent;          
        overflowauto;  
        positionabsolute;  
    }  
    .newsFeed  
       {  
            backgroundurl('newsFeedBgr.gif'no-repeat;  
            background-color: Green;  
            width438px;  
            height42px;  
            padding14px 0 0 20px;  
            margin: 0 0 2px 0;  
        }  
    </style>  
     

    Note the background-color: Transparent;, that is the key here. :)

    Here's the rotator I used to test:

           <telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance"   
        ScrollDirection="Up" ScrollDuration="2000" runat="server" DataSourceID="xmlDataSource1" 
                Width="450" Height="200" FrameDuration="1" InitialItemIndex="-1" CssClass="RadRotator_Default" > 
                <ItemTemplate> 
                    <div class="newsFeed">  
                        <strong><a href='<%# XPath("link") %>'>  
                            <%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%> 
                        </a></strong>  
                        <br /> 
                        <%# XPath("pubDate") %> 
                    </div> 
                </ItemTemplate> 
            </telerik:RadRotator> 
            <asp:XmlDataSource ID="xmlDataSource1" XPath="rss/channel/item" runat="server" DataFile="http://blogs.telerik.com/Blogs.rss">  
            </asp:XmlDataSource> 
     

    It's nice when you figure something out on a Friday afternoon. ;D
  5. Tony
    Tony avatar
    22 posts
    Member since:
    Jun 2005

    Posted 26 Feb 2009 Link to this post

    Hi,

    I'm still having this problem, but in a slightly specific situation.  I have tried Q2 and Q3 controls and they act the same.

    In IE7 (not firefox) the second and subsequent frames of the rotator change to white, BUT only when my rotator is set to either...

    SlideShowAnimation-Type="Fade" 

    or

    SlideShowAnimation-Type="Pulse" 

    If it set it to "None" it works fine.

    Here is my rotator code...

    <telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="None" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator"
        <Items> 
            <telerik:RadRotatorItem> 
                <ItemTemplate> 
                    Some text here 
                </ItemTemplate> 
            </telerik:RadRotatorItem> 
        </Items> 
        <Items> 
            <telerik:RadRotatorItem> 
                <ItemTemplate> 
                    Some more text here 
                </ItemTemplate> 
            </telerik:RadRotatorItem> 
        </Items> 
    </telerik:RadRotator> 









  6. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 27 Feb 2009 Link to this post

    Hello Tony,

    I am not quite sure what exactly do you mean when you say "frames of the rotator change to white". I have tried your code and I cannot see white frames in RadRotator control.
    Could you please provide more information about the issue or open a new support ticket and send me a simple demo project where I can observe the problem? Once I have a better view over your setup, I will do my best to help.

    Best wishes,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Tony
    Tony avatar
    22 posts
    Member since:
    Jun 2005

    Posted 27 Feb 2009 Link to this post

    Hi,

    I have played a little more so I can better explain the situation.

    Using the code below it seems that when the rotator is set to eithe SlideShowAnimation-Type="Fade" or SlideShowAnimation-Type="Pulse" the rotators 2nd and susequent frames "cut" through to the body's background image to the background colour.  Try changing the body's background colour.

    If you set the rotator to SlideShowAnimation-Type="None", it works as expected with the background image behind all frames.

    <asp:ScriptManager ID="ScriptManager" runat="server" /> 
    <style> 
    body  
        background:#202020 url(../Images/body-bg.jpg) repeat-x left top; 
    .radr_Default .radr_clipRegion 
        width:100%; 
        height:100%; 
        background-color:transparent !important; 
        overflow:auto; 
        position:absolute; 
    </style>     
    <div> 
        <telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="Fade" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator">   
            <Items>   
                <telerik:RadRotatorItem>   
                    <ItemTemplate>   
                        Some text here   
                    </ItemTemplate>   
                </telerik:RadRotatorItem>   
            </Items>   
            <Items>   
                <telerik:RadRotatorItem>   
                    <ItemTemplate>   
                        Some more text here   
                    </ItemTemplate>   
                </telerik:RadRotatorItem>   
            </Items>   
        </telerik:RadRotator> 
    </div> 
  8. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 02 Mar 2009 Link to this post

    Hello Tony,

    Thank you for the clarification - now I was able to reproduce the problem. This behavior is browser specific and with the current animation mechanism it is not possible to override it. The good news is that we are currently reworking the RadRotator's animations and we are implementing the jQuery effects in it.  The new feature will be available in the middle of March with the Q1 2009 version of the controls.


    Best wishes,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017