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:
https://edit.yahoo.com/registration?.intl=us&new=1&.done=http://mail.yahoo.com&.src=ym&.v=0&.u=47furq93nrtek&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last=
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>
2- Then Create the AnimationExtender control and assign any default TargetControlID property because it will not work if its empty.
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2">
3- Then create the controls you will work on as you can see in the complete page code below.
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:
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="TextBox2"><Animations><OnClick>
<Sequence><FadeIn AnimationTargetScript="javascript:getTargetControl();" Duration="0.5" Fps="300"/>
</Sequence> </OnClick></Animations>
</cc1:AnimationExtender>
<input type="hidden" id="hid" value="msg1" /> function getTargetControl()
{ return document.getElementById("hid").value; }
Then we want to make the function which will start the animation when clicking on a textbox control:
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();
}
}
This is the complete page sample:
<%@ 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();
}
}
function getTargetControl()
{ 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>
Now everything is done, you can try and manipulate as you want, you will find it simple.
Posts
