UpdatePanelAnimationExtender sets background to black ( #000 )

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » UpdatePanelAnimationExtender sets background to black ( #000 )

Shortcuts

Previous Next

UpdatePanelAnimationExtender sets background to black ( #000 )

Last post 05-07-2009 10:07 AM by jfarquharson. 5 replies.

Sort Posts:

UpdatePanelAnimationExtender sets background to black ( #000 )

04-30-2009, 12:33 PM

Contact

1 point Member
jfarquharson
Member since 04-30-2009, 12:28 PM
Posts 4

I have a update panel that has a timer as a trigger and every 7 seconds it fires the timer event. In the event I just grab a news article title and display it. I'm using the UpdatePanelAnimationExtender for a fade in/fade out effect. Each time it updates in IE7 and IE6 it sets the elements background to #000 when I want it to be "none" or "transparent". Here is my code:

1    <asp:Content ContentPlaceHolderID="NewsContent" runat="server">
2        <asp:Timer ID="Timer1" runat="server" Interval="7000" OnTick="UpdateNews">
3        </asp:Timer>
4        <span class="news_header">SOAPware News: </span>
5        <div id="up_container" style="">
6            <asp:UpdatePanel ID="NewsTicker" runat="server" UpdateMode="Always">
7                <Triggers>
8                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
9                </Triggers>
10               <ContentTemplate>
11                   <asp:HyperLink ID="NewsItem" CssClass="news_item" runat="server"></asp:HyperLink>
12               </ContentTemplate>
13           </asp:UpdatePanel>
14       </div>
15       <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
16           TargetControlID="NewsTicker">
17           <Animations>
18                   <OnUpdating>
19                       <Sequence>                       
20                           <%-- Do each of the selected effects --%>
21                           <Parallel duration="2" Fps="30">
22                               <FadeOut AnimationTarget="up_container" />                                   
23                            </Parallel>
24                       </Sequence>
25                   </OnUpdating>
26                   <OnUpdated>
27                       <Sequence>
28                           <%-- Do each of the selected effects --%>
29                           <Parallel duration="2" Fps="30">
30                                   <FadeIn AnimationTarget="up_container" />                           
31                           </Parallel>
32                               
33                       </Sequence>
34                   </OnUpdated>
35           </Animations>
36       </ajaxToolkit:UpdatePanelAnimationExtender>
37   </asp:Content>

Re: UpdatePanelAnimationExtender sets background to black ( #000 )

04-30-2009, 3:48 PM

Contact

1 point Member
jfarquharson
Member since 04-30-2009, 12:28 PM
Posts 4

Anyone? Here is a screen shot of the behavior. It does not happen on firefox.

http://picasaweb.google.com/lh/photo/8Jd2Aq3Wyy6tbPRGMa2GyQ?feat=directlink

Re: UpdatePanelAnimationExtender sets background to black ( #000 )

05-04-2009, 2:45 PM

Contact

1 point Member
jfarquharson
Member since 04-30-2009, 12:28 PM
Posts 4

Bump.

This is really annoying. Anyone?

Re: UpdatePanelAnimationExtender sets background to black ( #000 )

05-06-2009, 11:26 PM

Contact

Answer

25,875 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 12:37 AM
Posts 2,322

Hi jfarquharson,

I can not reproduce the issue based on your code, when the DIV fade out, the background color didn’t changed to “#000”.

Here is my test code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestFadeAnimation.aspx.vb"
    Inherits="SoluTest_UpdateAnimation.TestFadeAnimation" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body bgcolor="#3399FF">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />        
        <asp:Timer ID="Timer1" runat="server" Interval="7000" OnTick="UpdateNews">
        </asp:Timer>
        <span class="news_header">SOAPware News: </span>
        <div id="up_container" style="background-color: #00FF00">
            <asp:UpdatePanel ID="NewsTicker" runat="server" UpdateMode="Always">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                asdoubfasbndufnoasi<br />
                asdfiuasbnduinf<br />
                asdiubfoiuasbnduifn<br />
                asdfunon<br />
                    <asp:HyperLink ID="NewsItem" CssClass="news_item" runat="server"></asp:HyperLink>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
            TargetControlID="NewsTicker">
            <Animations>
                   <OnUpdating>
                       <Sequence>                       
                           <%-- Do each of the selected effects --%>
                           <Parallel duration="2" Fps="30">
                               <FadeOut AnimationTarget="up_container" />                                   
                            </Parallel>
                       </Sequence>
                   </OnUpdating>
                   <OnUpdated>
                       <Sequence>
                           <%-- Do each of the selected effects --%>
                           <Parallel duration="2" Fps="30">
                                   <FadeIn AnimationTarget="up_container" />                           
                           </Parallel>                               
                       </Sequence>
                   </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>
    </div>
    </form>
</body>
</html>

Maybe you can post more detailed information to help us reproduce the issue.

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Re: UpdatePanelAnimationExtender sets background to black ( #000 )

05-07-2009, 4:39 AM

Contact

Answer

299 point Member
soharadesign
Member since 04-29-2009, 8:46 AM
Hemel Hempstead, UK
Posts 69

This is quite simple - it is a bug with FadeIn/FadeOut and setting your background to transparent I am afraid.

What happens is the control seems to use the lowest bg property it can find, and makes everything else above that transparent. The transparent property effectively 'grabs' the bg colour of the element below it, and displays that - instead of being truly trasparent. So, I think that your grey brushed metal page background must have also a background colour property of 'black' or #000000. Check the body tag in your style rules also, and change the BG to white, or remove it completely.

In your case, there are 2 steps to rectify this:

Ensure that the ticker does not exceed the width of the page
Rather than setting the bg property to none or transparent, set it to white, which as far as I can tell, matches your page content background.

Let me know if these steps work.

Thanks,

Steve

EDIT: Just double checked the site - your body tag (in Main.css) is indeed setting a bg property of black (#000000). Changing this to white should help!

Steve O'Hara

Sohara Design

Re: UpdatePanelAnimationExtender sets background to black ( #000 )

05-07-2009, 10:07 AM

Contact

1 point Member
jfarquharson
Member since 04-30-2009, 12:28 PM
Posts 4

This did resolve it. Fortunatley we just changed from a fading background to a solid white background. This is a pretty nasty little bug. It works properly in Firefox.

Thanks for the help!

Page 1 of 1 (6 items)

RSS Available