locked
Validator Callout Animation RRS feed

  • Question

  • User1067346975 posted

     Hello, do you know how to put fade in and fade out animation on validator callout using ajax control toolkit? So when the validator callout show, it has fade in animation effect, and when the validator callout hide, it has fade out animation effect. Could you give me example or sample code how to do it?

    Sunday, March 29, 2009 2:51 AM

Answers

  • User1335925338 posted

    Hi ExCelciuS,

    Animations - Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference for more details.
    •    OnShow - The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.
    •    OnHide - The OnHide animation will be played each time the validation popup is hidden.

    Please try my code: 

    <asp:TextBox ID="txtTest" runat="server" ValidationGroup="vlTest"></asp:TextBox>
    <ajaxToolkit:TextBoxWatermarkExtender ID="tw" TargetControlID="txtTest" WatermarkText="Field 1"
        runat="server">
    </ajaxToolkit:TextBoxWatermarkExtender>
    <asp:Label ID="lblresult" runat="server"></asp:Label>
    <asp:Button ID="btnSend" runat="server" Text="Send" ValidationGroup="vlTest" OnClick="btnSend_Click" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtTest"
        Display="None" ErrorMessage="is a required field." SetFocusOnError="true" ToolTip="is a required field."
        ValidationGroup="vlTest">
    </asp:RequiredFieldValidator>
    <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="Server"
        HighlightCssClass="validatorCalloutHighlight" TargetControlID="RequiredFieldValidator1">
        <Animations>
            <OnShow>                                    
            <Sequence>   
            <HideAction Visible="true" /> 
            <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
            </Sequence>
            </OnShow>
            <OnHide>
            <Sequence>    
            <FadeOut Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
            <HideAction Visible="false" />
            </Sequence>
            </OnHide>
        </Animations>
    </ajaxToolkit:ValidatorCalloutExtender>
    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 1, 2009 5:48 AM

All replies

  • User1335925338 posted

    Hi ExCelciuS,

    Animations - Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference for more details.
    •    OnShow - The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.
    •    OnHide - The OnHide animation will be played each time the validation popup is hidden.

    Please try my code: 

    <asp:TextBox ID="txtTest" runat="server" ValidationGroup="vlTest"></asp:TextBox>
    <ajaxToolkit:TextBoxWatermarkExtender ID="tw" TargetControlID="txtTest" WatermarkText="Field 1"
        runat="server">
    </ajaxToolkit:TextBoxWatermarkExtender>
    <asp:Label ID="lblresult" runat="server"></asp:Label>
    <asp:Button ID="btnSend" runat="server" Text="Send" ValidationGroup="vlTest" OnClick="btnSend_Click" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtTest"
        Display="None" ErrorMessage="is a required field." SetFocusOnError="true" ToolTip="is a required field."
        ValidationGroup="vlTest">
    </asp:RequiredFieldValidator>
    <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="Server"
        HighlightCssClass="validatorCalloutHighlight" TargetControlID="RequiredFieldValidator1">
        <Animations>
            <OnShow>                                    
            <Sequence>   
            <HideAction Visible="true" /> 
            <FadeIn Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
            </Sequence>
            </OnShow>
            <OnHide>
            <Sequence>    
            <FadeOut Duration="1" MinimumOpacity="0" MaximumOpacity="1" />
            <HideAction Visible="false" />
            </Sequence>
            </OnHide>
        </Animations>
    </ajaxToolkit:ValidatorCalloutExtender>
    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 1, 2009 5:48 AM
  • User1067346975 posted

     Okay, your code is work, the problem solved. Thank you so much Zhi-Qiang Ni. [:D]

    Thursday, April 2, 2009 6:03 AM