Ajax Enabled Animation Popup

Many of us already have animation extender popup control provided by Microsoft. This code is placed in web page only once, what if we want this has to replicated more than once in our page.

Microsoft already provided AnimationExtender control to have popup control. This article will help you to create a user control of this AnimationExtender control. This user control is benifitioal where we ant place more than one AnimationExtender popup control.

Reson behind this article was getting problem when applying more than one AnimationExtender in single page. Either you have to place 2* AnimationExtender for each popup which dosen't looks good OR make a user control and place it where ever you want.

Lets start making AnimationExtneder popup usercontrol. I am using Microsoft provided code which we can easily download.

Step:1

Add reference of "AjaxControlToolkit" to your application. Create user control name "PopupHelp" and add it to your project. Now place only AnimationExtender tag without child tags which we will create dynamically in further steps.

<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="imgHelp">
<Animations></Animations>
</cc1:AnimationExtender>

<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations></Animations>
</cc1:AnimationExtender>

here we are having 2 AnimationExtender, one for open popup and second for closing that popup. both controls has TargetControlID, these are the controls which are causing opening and closing popup. So your user control will look like this after putting above code.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupHelp.ascx.cs" Inherits="Controls_PopupHelp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<table cellpadding="0" cellspacing="0" >
<tr>
<td>
<img alt="What's this?" id="imgHelp" runat="server" src="../Images/info.png" />
<div id="flyout" class="wireFrame" style="height:<%=Height %>px" runat="server"></div>
</td>
<td>
<div id="info" style="width: <%=Width %>px;" class="InfoContainer" runat="server">
<div id="btnCloseParent" class="CloseParent" runat="server">
<asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" CssClass="CloseIcon" />
</div><%=DisplayText%></div>
</td>
</tr>
</table>

<cc1:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="imgHelp">
<Animations></Animations>
</cc1:AnimationExtender>

<cc1:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations></Animations>
</cc1:AnimationExtender>

I wil explain above part in Step:2

Step:2

Above part contains a image tag which is referencing image "info.png". This is the control which causes opening our popup help control. This control's id is refered to first AnimationExtender. Second AnimationExtender is referencing "btnClose" control id. Server side code "<%=Height %>" and "<%=Width %>" are setting control's height and width respectively. Div "flyout" is the div which will fly and will be stable at desired place, later on div "info" will appear on the top of "flyout". Div "btnCloseParent" has link button which will appear in popup control and will cause for closing animation control. "<%=DisplayText%>" is used for text to be display in animation popup control.

Step:3

Now switch to your code behind. Microsoft provided sample code has design time tags but we will create different animation tags in code behind on page load event. Remember don't put "!IsPostBack" condition to create these tags because they will throw exception while page submitting. Here is few part of code behind. You will get full source code along with this article as an attachment.

// Get or Set popup window message

public string DisplayText
{
get
{
return this._displayText;
}

set
{
this._displayText = value;
}
}

// Get or Set popup window width

public string Width
{
get
{
return this._width;
}

set
{
this._width = value;
}
}

// Get or Set popup window height

public string Height
{
get
{
return this._height;
}

set
{
this._height = value;
}
}

We are making these properties to set Height, Width and Display text for control.

Step:4

Finally you have to hookup your user control with any page. Here i am taking Default.aspx page to be display this animation popup. Output will look like

Before Animation

After Animation

This control is tweaked and fully functional in IE7/FireFox 2/Safari 3.1/Netscape 9/Opera 9.52.

Hope this user control helps you to get an idea to put multiple Ajax enabled popup controls in single page.

Enjoy coding!!!