Posts
How to make one AnimationExtender which apply on more than one control based on your selection in run time?
There are many solutions available online, some are very complicated and some are not useful.
For example if you want to make something like the messages which appear when you click on password, postal code,... text controls in this yahoo registration page:
Sure this is not the only way to do the same as in this page, but this is how to do the same using AnimationExtender Ajax ToolKit control.
And Now how to make it:
We want to show an animated different message when we click on different TextBoxs.
1- Don't forget to add the Script Manger before using the AnimationExtender Control
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
4- Now the problem that the TargetControlID property can't be dynamic, so what we can do to apply the same Extender to more than one control:
We can make a small work around by adding a hidden field and using javascript we can set this hidden field to the control we need.
Then assign this hidden control value to the AnimationTargetScript:
<Animations>
<OnClick><Sequence>
<FadeIn AnimationTargetScript="javascript:getTargetControl();" Duration="0.5" Fps="300"/></Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<input type="hidden" id="hid" value="msg1" />
{ return document.getElementById("hid").value;
}
function animate(ele) { $get("Msg1").style.opacity=0; $get("Msg2").style.opacity=0; $get("hid").value=ele; if ($find("AnimationExtender1")!=null)
{ var onclkBehavior = $find("AnimationExtender1").get_OnClickBehavior().get_animation();
onclkBehavior.play();
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
function animate(ele){
$get("Msg1").style.opacity=0;$get("Msg2").style.opacity=0;$get("hid").value=ele;if ($find("AnimationExtender1")!=null){var onclkBehavior = $find("AnimationExtender1").get_OnClickBehavior().get_animation();onclkBehavior.play();}}{return document.getElementById("hid").value;}18:</script>
</head>
<body><form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2">
<Animations>
<OnClick>
<Sequence>
<FadeIn AnimationTargetScript="javascript:getTargetControl();" Duration="0.3" Fps="300"/>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<input type="hidden" id="hid" value="msg1" />
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" onclick="javascript:animate('Msg1');"></asp:TextBox>
</td>
<td>
<div id="Msg1" style="opacity: 0; left: 781px; top: 662px; color: #FF0000;">
THIS IS Message 1
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox2" runat="server" onclick="javascript:animate('Msg2');"></asp:TextBox>
</td>
<td>
<div id="Msg2" style="opacity: 0; left: 781px; top: 662px; color: #00FF00;">
THIS IS Message 2
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
