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

White Background

6 Answers 102 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Cade Cote
Top achievements
Rank 1
Cade Cote asked on 25 Sep 2008, 03:10 PM
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>

6 Answers, 1 is accepted

Sort by
0
Serrin
Top achievements
Rank 1
answered on 25 Sep 2008, 08:38 PM
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. :)
0
Serrin
Top achievements
Rank 1
answered on 26 Sep 2008, 08:29 PM
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
0
Matt
Top achievements
Rank 2
answered on 26 Feb 2009, 10:02 PM
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> 









0
Fiko
Telerik team
answered on 27 Feb 2009, 09:47 AM
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.
0
Matt
Top achievements
Rank 2
answered on 27 Feb 2009, 11:05 AM
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> 
0
Fiko
Telerik team
answered on 02 Mar 2009, 06:26 AM
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.
Tags
Rotator
Asked by
Cade Cote
Top achievements
Rank 1
Answers by
Serrin
Top achievements
Rank 1
Matt
Top achievements
Rank 2
Fiko
Telerik team
Share this question
or