Wednesday, March 28, 2012

Dynamic AnimationTarget

I have a question concerning animation, specifically the AnimationTarget property. Has anyone found a way to changethis property dynamically? Meaningt I have a lot of animations that will be the exact same for a lot of different controls, and I do not want a lot of repeat code with just the AnimationTarget that changes. Thanks for any help.

Eric

Hi,

In your markup , change AnimationTarget to be AnimationTargetScript. Then it will be dynamically evaluated on the client side , each time the animation runs .

Ex :

<Resize Height="100" Width="100" AnimationTargetScript="GetID()" />

function GetID() {

return ControlID;
}

Hope this helps


Hmm, I dont think I understand. I tried that and I just put an alert in my javascript to make sure it goes into the function, but nothing happens. Any help would be appreciated.

hi,

Can you share your markup ?


Here is my animation code:

<ajaxToolkit:AnimationExtender id="MyExtender"
runat="server" TargetControlID="LinkButton1">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Color AnimationTarget="cell1"
Duration="0"
StartValue="#FF0000"
EndValue="#FF0000"
Property="style"
PropertyKey="backgroundColor" />
<Color AnimationTarget="cell1"
Duration="0"
StartValue="#000000"
EndValue="#000000"
Property="style"
PropertyKey="color" />
<EnableAction Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

and here is my javascript
<script language=javascript>
function getID()
{
alert(document.getElementById('MyExtender').id);
return document.getElementById('MyExtender').id;
}
</script


im sorry it should be this code
<ajaxToolkit:AnimationExtender id="MyExtender"
runat="server" TargetControlID="LinkButton1">
<Animations>
<OnClick>
<Sequence>
<EnableAction Enabled="false" />
<Color AnimationTargetScript="getID()"
Duration="0"
StartValue="#FF0000"
EndValue="#FF0000"
Property="style"
PropertyKey="backgroundColor" />
<Color AnimationTargetScript="getID()"
Duration="0"
StartValue="#000000"
EndValue="#000000"
Property="style"
PropertyKey="color" />
<EnableAction Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>


hi ,

The issue is that from your GetID() function , you have to return the TargetControlID that you want to be animated , not the ID of the AnimationExtender itself.

so . if you were animating button1 . your GetID() function would be

function GetID() {

return '<%Buttin1.ClientID%>';

}

Hope this helps clear it up


shouldnt my function at least alert though? it is like it doesnt even call the function


hi,

instead of

alert(document.getElementById('MyExtender').id);

try

alert('I am running');

if there is an error in the code , alert will not fire

No comments:

Post a Comment