Trigger Animation

Last post 09-26-2006 4:03 PM by Ted Glaza [MSFT]. 8 replies.

Sort Posts:

  • Trigger Animation

    09-20-2006, 9:57 AM
    • Member
      138 point Member
    • Marinus
    • Member since 03-16-2006, 11:21 AM
    • Posts 38

    Like most of the ToolkitExtensions the AnimationExtension is connected to a TargetId, mostly a button.
    But how could I trigger an animation in my codebehind. Say I check the text in a TextBox. How could I then start the animation. I tried RegisterStartupScript, but I can't get it right.

    protected void Button1_Click(object sender, EventArgs e)
    {
       if (TextBox1.Text == "")
       {
            //Show my animation
      
    }
    }

  • Re: Trigger Animation

    09-20-2006, 3:06 PM
    • Member
      35 point Member
    • mattiasj
    • Member since 06-30-2002, 8:41 AM
    • Posts 7

    Seconded!!

     

    Yes, god please, someone tell me how this is done.

    /Mattias Johansson
  • Re: Trigger Animation

    09-20-2006, 3:10 PM
    • Member
      35 point Member
    • mattiasj
    • Member since 06-30-2002, 8:41 AM
    • Posts 7
    Alternatively, tell us how to get the IDs of server controls into ConditionScript.
    /Mattias Johansson
  • Re: Trigger Animation

    09-20-2006, 7:41 PM
    • Contributor
      4,198 point Contributor
    • Ted Glaza [MSFT]
    • Member since 04-12-2006, 7:51 PM
    • Microsoft
    • Posts 847
    • AspNetTeam

    Hi Marinus/Mattias,

    I think the best thing to do, as Mattias suggests, is to use the ConditionAnimation.  This will let you decide whether or not to play the animation by running a little bit of JavaScript.  Assuming your TextBox has an ID="TextBox1" (and isn't in a naming container - but if it is, then its ClientID, which is the munged ID of your server control when written to the client, will look something like ctl00_MyPanel1_TextBox1), you could define your animation as:
         .
         .
         .
         <Animations>
           <OnClick>
             <%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
             <Condition ConditionScript="$('TextBox1').value == ''">
                 .
                 . <%-- Original animation markup here --%>
                 .
             </Condition>
           </OnClick>
         </Animations>
         .
         .
         .


    If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed in this post) that will play the animation (as discussed here - and each animation, like OnClick, OnMouseOver, etc., has it's own function you can call to invoke it).  If this doesn't answer your question, please keep posting.

    Thanks,
    Ted

    This posting is provided "AS IS" with no warranties, and confers no rights.
    Filed under:
  • Re: Trigger Animation

    09-21-2006, 2:49 AM
    • Member
      138 point Member
    • Marinus
    • Member since 03-16-2006, 11:21 AM
    • Posts 38
    Thanks for your answer Ted, I will read the posts and try it out.
  • Re: Trigger Animation

    09-21-2006, 3:33 AM
    • Member
      138 point Member
    • Marinus
    • Member since 03-16-2006, 11:21 AM
    • Posts 38

    Ted,
    In the post about the ModalPopupExtender you wrote:
    "Again, we're looking at making this a LOT easier with updates in our next release."
    And yes, in the next release of the toolkit it was much easier. Now you just could write in your code behind:

    ModalPopupProperties
    popup = MyModalExtender.GetTargetProperties(Target);
    popup.Show();

    Great!
    Does the AnimationExtender has something alike?

     

  • Re: Trigger Animation

    09-22-2006, 2:13 PM
    • Contributor
      4,198 point Contributor
    • Ted Glaza [MSFT]
    • Member since 04-12-2006, 7:51 PM
    • Microsoft
    • Posts 847
    • AspNetTeam
    Hi Marinus,

    The AnimationExtender doesn't have support for playing animations from the server (mostly because they're meant to be triggered from the client and it's a little weird to suggest that while the page was posting back your mouse hovered over a certain control).  Another route you might look into is creating the OnLoad animation on the server because that will automatically play once you post back.

    Thanks,
    Ted
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Filed under:
  • Re: Trigger Animation

    09-23-2006, 7:35 AM
    • Member
      35 point Member
    • mattiasj
    • Member since 06-30-2002, 8:41 AM
    • Posts 7

    Hi Ted,

     

    I'm not 100% sure I understand your answer. Will the code below work if the TextBox is in a naming container (and therefore has that long munged ClientID) or not? If not, how do I make it work, because TextBoxes are almost always in naming containers in any reasonably complex application. I havent figured out how the heck to get the ClientID into the ConditionScript attribute of the Condition tag.

     

    /Mattias


    Ted Glaza [MSFT]:

    Hi Marinus/Mattias,

    I think the best thing to do, as Mattias suggests, is to use the ConditionAnimation.  This will let you decide whether or not to play the animation by running a little bit of JavaScript.  Assuming your TextBox has an ID="TextBox1" (and isn't in a naming container - but if it is, then its ClientID, which is the munged ID of your server control when written to the client, will look something like ctl00_MyPanel1_TextBox1), you could define your animation as:
         .
         .
         .
         <Animations>
           <OnClick>
             <%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
             <Condition ConditionScript="$('TextBox1').value == ''">
                 .
                 . <%-- Original animation markup here --%>
                 .
             </Condition>
           </OnClick>
         </Animations>
         .
         .
         .


    If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed in this post) that will play the animation (as discussed here - and each animation, like OnClick, OnMouseOver, etc., has it's own function you can call to invoke it).  If this doesn't answer your question, please keep posting.

    Thanks,
    Ted

    /Mattias Johansson
  • Re: Trigger Animation

    09-26-2006, 4:03 PM
    • Contributor
      4,198 point Contributor
    • Ted Glaza [MSFT]
    • Member since 04-12-2006, 7:51 PM
    • Microsoft
    • Posts 847
    • AspNetTeam
    Hi Mattias,

    No, the code example you were quoting wouldn't work if you had a TextBox in an INamingContainer.  We'd like to make some improvements for scenarios like this in the future, but for now there is a workaround available.  You can programatically modify the animations on the server like this: 
    <%@ Page Language="C#" %>
    <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
    protected override void OnLoad(EventArgs e)
    {
    base.OnLoad(e);

    // Set the ConditionScript property of the OnClick Animation
    MyAnimations.OnClick.Properties["ConditionScript"] = string.Format("( $('{0}').value == '' )", txtName.ClientID);

    // Set the AnimationTarget property of the OnClick Animation's first child
    MyAnimations.OnClick.Children[0].Properties["AnimationTarget"] = txtName.ClientID;
    }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server"><title>Test Page</title></head>
    <body><form runat="server"><div>
    <atlas:ScriptManager id="ScriptManager" runat="server" />
    Name: <asp:TextBox ID="txtName" runat="server" /><br />
    <asp:Button ID="btnValidate" runat="server" Text="Animate If Empty" OnClientClick="return false;" />

    <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
    <atlasToolkit:AnimationProperties ID="MyAnimations" TargetControlID="btnValidate">
    <Animations>
    <OnClick>
    <Condition ConditionScript="/* To be filled in by the server - we'll default to false */ false">
    <Color Duration="1" StartValue="#FFFFFF" EndValue="#FF0000"
    Property="style" PropertyKey="backgroundColor" />
    </Condition>
    </OnClick>
    </Animations>
    </atlasToolkit:AnimationProperties>
    </atlasToolkit:AnimationExtender>
    </div></form></body>
    </html>
    Thanks,
    Ted
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Filed under:
Page 1 of 1 (9 items)