Sunday, March 11, 2012

Two buttons one AnimationExtender

each AnimationExtender may only have one TargetControlID

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