asp.net animated login

auyuksel
auyuksel used Ask the Experts™
on
Hi everyone, I am using belove code snippet to produce animated login on aspx page it works well on google chrome browser but on ie9 login form appears and hides what is the problem with internet exolorer 9.0 and also could you offer animated login code snippets on asp.net
thank you for all your help...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ 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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.flyOutDiv
{
display: none;
position: absolute;
width: 400px;
z-index: 3;
opacity: 0;
filter:(progid:DXImageTransform.Microsoft.Alpha(opacity=0));
font-size: 14px;
border: solid 1px #CCCCCC;
background-color: #FFFFFF;
padding: 5px;
}

.flyOutDivCloseX
{
background-color: #666666;
color: #FFFFFF;
text-align: center;
font-weight: bold;
text-decoration: none;
border: outset thin #FFFFFF;
padding: 5px;
}

</style>
</head>
<body>
<form id="form1" runat="server">

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return false;" />

<div id="moveMe" class="flyOutDiv">
<div style="float:right;">
<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" OnClientClick="return false;" CssClass="flyOutDivCloseX" />
</div>
<br />
<p>
<table>
<tr>
<td>
Login Id:
</td>
<td>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txt1" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</td>



</tr>
</table>
</p>
</div>

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkBtnColHelp">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false"></EnableAction>

<StyleAction AnimationTarget="moveMe" Attribute="display" Value="block"/>
<Parallel AnimationTarget="moveMe" Duration=".5" Fps="30">
<Move Horizontal="350" Vertical="50"></Move>
<FadeIn Duration=".5"/>
</Parallel>
<Parallel AnimationTarget="moveMe" Duration=".5">
<Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" />
</Parallel>
</Sequence>
</OnClick>
</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="lnkBtnCloseColHelp">

<Animations>
<OnClick>
<Sequence AnimationTarget="moveMe">
<Parallel AnimationTarget="moveMe" Duration=".7" Fps="20">
<Move Horizontal="-350" Vertical="-50"></Move>
<Scale ScaleFactor="0.05" FontUnit="px" />
<Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" />
<FadeOut />
</Parallel>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="width" Value="400px"/>
<StyleAction Attribute="fontSize" Value="14px"/>
<EnableAction AnimationTarget="lnkBtnColHelp" Enabled="true" />
</Sequence>
</OnClick>
</Animations>

</ajaxToolkit:AnimationExtender>
</form>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
add <meta http-equiv="X-UA-Compatible" content="IE=8" /> and try to run the page is it working fine in ie9


reference:

http://forums.asp.net/t/1672105.aspx/1?Ajax+IE9+Bug+Animation+Control+off+this+website+doesn+t+work+in+IE9

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial