AJAX Toolkit - AnimationExtender - IE support

Question

I'm trying to do a simple pulse animation in ASP.NET using the AJAX Toolkit. It works in all other browsers except IE where it just stays static. Anyone know if there's a way to make it compatible with IE? I read something about ForceLayoutInIE but not sure if that's for pulse or just Fade.

Here's the code. Don't mind the Timer, that's for something else.

<asp:UpdatePanel ID="upnlMessage" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick" />
        <center>
            <asp:Label ID="lblMessage" runat="server" CssClass="feedbackmessage" />
            <ajax:AnimationExtender ID="lblMessage_AnimationExtender" runat="server" Enabled="True"
                TargetControlID="lblMessage">
               <Animations>
                   <OnLoad>
                      <Sequence>
                         <Pulse Duration="0.5" Iterations="0" />
                      </Sequence>
                   </OnLoad>
               </Animations>
        </center>
    </ContentTemplate>
</asp:UpdatePanel>

score 0 · Answer 1 · answered Feb 06 '12 at 21:50

Okay, I figured out part of it. For some reason, IE doesn't doesn't respond well to ASP.NET objects. It probably has something to do with how ASP.NET renames the control IDs client-side. My workaround was to set the target of the AnimationExtender to a div that wraps around the Label instead of the ASP.NET Label control itself. So my code now looks like this:

<asp:UpdatePanel ID="upnlMessage" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick" />
        <div id="divMessage">
            <center>
                <asp:Label ID="lblMessage" runat="server" CssClass="feedbackmessage" />
                <ajax:AnimationExtender ID="lblMessage_AnimationExtender" runat="server" Enabled="True" TargetControlID="divMessage">
                <Animations>
                   <OnLoad>
                      <Sequence>
                         <Pulse Duration="0.5" Iterations="0" />
                      </Sequence>
                   </OnLoad>
                </Animations>
            </center>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

AJAX Toolkit - AnimationExtender - IE support

1 Answers1