Although , there is no direct way of assigning 2 different TargetControlIds for the same Animation Extender , there is a workaround aht you can use that uses Javascript.
1) Assign a BehaviorID to the AnImationExtender
2) Hook the Client-Side click of the Additional Trigger control to a javascript function that triggers the animation.
3) Get the "OnClick" Behavior of the AnimationExtender and play that in the above JavaScript Function.
Example:
function
triggerAnimation(){var animBehavior = $find("dynamicAnimation");animBehavior.get_OnClickBehavior().play();
}
AnimationExtender Tag :
<
ajaxToolKit:AnimationExtenderrunat="server"ID="animateDiv"BehaviorID="dynamicAnimation"TargetControlID="originalTrigger">Duplicate Trigger :
<
asp:Buttonrunat="server"ID="btnDuplicateTrigger"OnClientClick="triggerAnimation();return false;"Text="Duplicate Trigger"/>
Complete Example :
<
formid="frmTriggerAnimation"runat="server"><scriptlanguage="javascript">function triggerAnimation(){var animBehavior = $find("dynamicAnimation");animBehavior.get_OnClickBehavior().play();
}
</script><asp:ScriptManagerrunat="server"ID="ScrpManager"></asp:ScriptManager><asp:Buttonrunat="server"ID="btnAnimate"OnClientClick="return false;"Text="Original Trigger"/><asp:Buttonrunat="server"ID="btnDuplicateTrigger"OnClientClick="triggerAnimation();return false;"Text="Duplicate Trigger"/><ajaxToolKit:AnimationExtenderrunat="server"ID="animateDiv"BehaviorID="dynamicAnimation"TargetControlID="originalTrigger"><Animations><OnClick><LengthProperty="style"PropertyKey="height"Fps="50"duration="0.2"StartValue="400"EndValue="100"AnimationTarget="div1"></Length></OnClick></Animations></ajaxToolKit:AnimationExtender><divid="div1"runat="server"style="display: block; width: 100px; height: 400px;position: absolute; background-color: #000000; color: #FFCC00">
Paragraph One
</div></form>
For More Details See this Post I made :
MS AJAX AnimationExtender : How Many Ways Do I Play thee ?
Hope this helps.
If it does , please mark my reply as the answer
Hi Phanatic!
I forgot that I had this post... I have just tried it and it works perfectly... good idea :)
Hey Phanatic,
Thanks for the superb response.
Could you tell me what $find does?
Also, I have the repositioning code in the onclick of the close button. Any way to invoke this when I hide the control instead of closing it? Also, can I reposition via javascript without animating?
Thanks in Advance,
Pinging
Hi Pinging,
The $find Searches the DOM for the behavior that is passed as a parameter.
Coming to the second question , to re-position an element without Animation is to use the setLocation Method.
Its reference isHere
Hope this helps
No comments:
Post a Comment