Wednesday, March 28, 2012

Programmatically Create AnimationExtender

I have not found any previous posts addressing this issue. I need to create an AnimationExtender programmatically from the code behind. Does anyone know how to do this? For instance using the example provided on the Toolkit page:

1<ajaxToolkit:AnimationExtender id="ace" runat="server" TargetControlID="btnHelp">2 <Animations>3 <OnLoad><OpacityAction AnimationTarget="info" Opacity="0" /></OnLoad>4 <OnClick>5 <Sequence>6 <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>7 <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">8 <Move Horizontal="150" Vertical="-50" />9 <Resize Width="260" Height="280" />10 <Color AnimationTarget="flyout" StartValue="#AAAAAA" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />11 </Parallel>12 <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />13 <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>14 <FadeIn AnimationTarget="info" Duration=".2"/>15 <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>16 <StyleAction AnimationTarget="info" Attribute="height" value="auto" />17 <Parallel Duration=".5">18 <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="color" />19 <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="borderColor" />20 </Parallel>21 <Parallel Duration=".5">22 <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="color" />23 <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="borderColor" />24 <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />25 </Parallel>26 </Sequence>27 </OnClick>28 </Animations>29 </ajaxToolkit:AnimationExtender>30 <ajaxToolkit:AnimationExtender id="AnimationExtender1" runat="server" TargetControlID="btnClose">31 <Animations>32 <OnClick>33 <Sequence>34 <StyleAction AnimationTarget="info" Attribute="overflow" Value="hidden"/>35 <Parallel AnimationTarget="info" Duration=".3" Fps="15">36 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />37 <FadeOut />38 </Parallel>39 <StyleAction AnimationTarget="info" Attribute="display" Value="none"/>40 <StyleAction AnimationTarget="info" Attribute="width" Value="250px"/>41 <StyleAction AnimationTarget="info" Attribute="height" Value=""/>42 <StyleAction AnimationTarget="info" Attribute="fontSize" Value="12px"/>43 <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" />44 <StyleAction AnimationTarget="btnCloseParent" Attribute="filter" value="alpha(opacity=0)" />4546 </Sequence>47 </OnClick>48 <OnMouseOver>49 <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />50 </OnMouseOver>51 <OnMouseOut>52 <Color Duration=".2" EndValue="#FFFFFF" StartValue="#FF0000" Property="style" PropertyKey="color" />53 </OnMouseOut>54 </Animations>55 </ajaxToolkit:AnimationExtender>

How would you create this AnimationExtender from a code behind? I am using VB.NET, but generally I have no problem reading and converting C# code.

You can add the Animation Extender programmatically like this

<script runat="server">
void Page_Load()
{
AjaxControlToolkit.AnimationExtender ace = new AjaxControlToolkit.AnimationExtender();
ace.TargetControlID = 'control id'

ace.Animations = 'the actual animation that has to appear'

Page.Controls.AddAt(0,ace);
}
</script>

For more information please look at this url

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7408



Sorry for the lateness of this reply. I figured out how to do it through the code behind. You basically just write the XML for the behaviors into a string builder then create a new Animation Extender and assing the XML to the .Animations property.


if possible, can you share the code?

thanks


It has been a while since I did this. I got it to work, but did not end up using it as you can only have a few on a page before it starts to really affect the load time of the page. Just to make things a little clearer, and please remeber I am pulling this from memory, sbScript contains the JS for positioning the popup. sbOpen contains the XML for the opening animation. I did not include the closing since it is a little redundant.

1Protected Sub Page_PreRender(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.PreRender2Dim _aeOpenAs New AjaxControlToolkit.AnimationExtender3Dim sbOpenAs New StringBuilder4Dim sbScriptAs New StringBuilder5Dim _ibHelpAs New ImageButton67 sbScript.AppendLine("<script type=""text/javascript"" language=""javascript"">")8 sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {")9 sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);")10 sbScript.AppendLine(" top.style.position ='absolute';")11 sbScript.AppendLine(" top.style.top = location.y +'px';")12 sbScript.AppendLine(" top.style.left = location.x +'px';")13 sbScript.AppendLine(" if (!ignoreSize) {")14 sbScript.AppendLine(" top.style.height = bottom.offsetHeight +'px';")15 sbScript.AppendLine(" top.style.width = bottom.offsetWidth +'px';")16 sbScript.AppendLine(" }")17 sbScript.AppendLine(" }")18 sbScript.AppendLine("</script>")19 Response.Write(sbScript.ToString)2021 _ibHelp.ID = "ibHelp"22 _ibHelp.OnClientClick = "return false;"23 _ibHelp.ImageUrl = "/admin/images/buttons/help.png"24 _ibHelp.ToolTip = "ClickFor Help"25 phAnimation.Controls.Add(_ibHelp)2627 sbOpen.Append("<OnLoad><OpacityAction AnimationTarget=""info")28 sbOpen.Append(Me.ID)29 sbOpen.AppendLine(""" Opacity=""0"" /></OnLoad>")3031 sbOpen.AppendLine("<OnClick>")32 sbOpen.AppendLine("<Sequence>")3334 sbOpen.Append("<ScriptAction Script=""Cover($get('")35 sbOpen.Append(_ibHelp.ClientID)36 sbOpen.Append("'), $get('flyout")37 sbOpen.Append(Me.ID)38 sbOpen.AppendLine("'));"" />")394041 sbOpen.Append("<StyleAction AnimationTarget=""flyout")42 sbOpen.Append(Me.ID)43 sbOpen.AppendLine(""" Attribute=""display"" Value=""block""/>")4445 sbOpen.Append("<Parallel AnimationTarget=""flyout")46 sbOpen.Append(Me.ID)47 sbOpen.AppendLine(""" Duration="".3"" Fps=""25"">")4849 sbOpen.AppendLine("<Move Horizontal=""150"" Vertical=""-50"" />")50 sbOpen.Append("<Resize Width300"" Height=""300"" />")5152'sbOpen.Append("<Color AnimationTarget=""flyout")53 'sbOpen.Append(Me.ID)54 'sbOpen.AppendLine(""" StartValue=""#AAAAAA"" EndValue=""#FFFFFF"" Property=""style"" PropertyKey=""backgroundColor"" />")55 'sbOpen.AppendLine("</Parallel>")5657 sbOpen.Append("<ScriptAction Script=""Cover($get('flyout")58 sbOpen.Append(Me.ID)59 sbOpen.Append("'), $get('info")60 sbOpen.Append(Me.ID)61 sbOpen.AppendLine("'), true);"" />")6263 sbOpen.Append("<StyleAction AnimationTarget=""info")64 sbOpen.Append(Me.ID)65 sbOpen.AppendLine(""" Attribute=""display"" Value=""block""/>")666768 sbOpen.Append("<FadeIn AnimationTarget=""info")69 sbOpen.Append(Me.ID)70 sbOpen.AppendLine(""" Duration="".2""/>")7172 sbOpen.Append("<StyleAction AnimationTarget=""flyout")73 sbOpen.Append(Me.ID)74 sbOpen.AppendLine(""" Attribute=""display"" Value=""none"" />")7576 sbOpen.Append("<StyleAction AnimationTarget=""info")77 sbOpen.Append(Me.ID)78 sbOpen.AppendLine(""" Attribute=""height"" Value=""auto""/>")7980 sbOpen.AppendLine("<Parallel Duration="".5"">")81 sbOpen.Append("<Color AnimationTarget=""info")82 sbOpen.Append(Me.ID)83 sbOpen.AppendLine(""" StartValue=""#666666"" EndValue=""#FF0000"" Property=""style"" PropertyKey=""color""/>")84 sbOpen.Append("<Color AnimationTarget=""info")85 sbOpen.Append(Me.ID)86 sbOpen.AppendLine(""" StartValue=""#666666"" EndValue=""#FF0000"" Property=""style"" PropertyKey=""borderColor""/>")87 sbOpen.AppendLine("</Parallel>")888990 sbOpen.AppendLine("<Parallel Duration="".5"">")91 sbOpen.Append("<Color AnimationTarget=""info")92 sbOpen.Append(Me.ID)93 sbOpen.AppendLine(""" StartValue=""#FF0000"" EndValue=""#666666"" Property=""style"" PropertyKey=""color""/>")94 sbOpen.Append("<Color AnimationTarget=""info")95 sbOpen.Append(Me.ID)96 sbOpen.AppendLine(""" StartValue=""#FF0000"" EndValue=""#666666"" Property=""style"" PropertyKey=""borderColor""/>")97 sbOpen.Append("<FadeIn AnimationTarget=""btnCloseParent")98 sbOpen.Append(Me.ID)99 sbOpen.AppendLine(""" MaximumOpacity="".9"" />")100 sbOpen.AppendLine("</Parallel>")101102 sbOpen.AppendLine("</Sequence>")103 sbOpen.AppendLine("</OnClick>")104105 _aeOpen.ID = "aeOpen"106 _aeOpen.TargetControlID = "ibHelp"107 _aeOpen.Animations = sbOpen.ToString108109 phAnimation.Controls.Add(_aeOpen)110End Sub

crLord, thanks for your reply.

here is what i have in my .ascx html code

ps: i want to put everything on the codebehind but not sure if that possible to do, can you please see my code and give your feedback?

thanks

here is my code:

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="AJAXPopUp.ascx.cs" Inherits="usercontrols_AJAXPublicInfo" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><div style="width: 200px"><!-- Button used to launch the animation--> <asp:ImageButton ID="btnInfo" runat="server" OnClientClick="return false;" ImageUrl="~/images/popup_info.gif" AlternateText="Show Detail Information..." /> <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #ffff66; border: solid 1px #D0D0D0;"></div><!-- Info panel to be displayed as a flyout when the button is clicked --> <div id="info" style="display: none; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; background-color: #ffffcc; padding: 5px; border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid;"> <div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);"> <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" /> </div> <div style="width: 300px"><!-- BEGIN: Here you can place your content. --> <table id="tblPublicInfo" border="1" style="width: 320px; background-color: AntiqueWhite"> <tr> <td> <b> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </b> </td> </tr> </table><!-- END: of the content. --> </div> </div> <script type="text/javascript" language="javascript"> // Move an element directly on top of another element (and optionally // make it the same size). // The location of the popup can be set in here. function Cover(bottom, top, ignoreSize) { var location = Sys.UI.DomElement.getLocation(bottom); top.style.position = 'absolute'; top.style.top = location.y + 'px'; top.style.left = location.x + 'px'; if (!ignoreSize) { top.style.height = bottom.offsetHeight + 'px'; top.style.width = bottom.offsetWidth + 'px'; } } </script> <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="btnInfo"> <Animations> <OnClick> <Sequence> <%-- Disable the button so it can't be clicked again --%> <EnableAction Enabled="false" /> <%-- Position the wire frame on top of the button and show it --%> <ScriptAction Script="Cover($get('AJAXPopUp1_btnInfo'), $get('flyout'));" /> <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/> <%-- Move the wire frame from the button's bounds to the info panel's bounds --%> <Parallel AnimationTarget="flyout" Duration=".3" Fps="25"> <Move Horizontal="150" Vertical="-10" /> <Resize Width="300" /> <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" /> </Parallel> <%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%> <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" /> <StyleAction AnimationTarget="info" Attribute="display" Value="block"/> <FadeIn AnimationTarget="info" Duration=".2"/> <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/> <StyleAction AnimationTarget="info" Attribute="filter" Value="progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=4);"/> <%-- Flash the text/border red and fade in the "close" button --%> <Parallel AnimationTarget="info" Duration=".1"> <%-- PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />--%> <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" /> </Parallel> <Parallel AnimationTarget="info" Duration=".1"> <%-- PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />--%> <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" /> <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" /> </Parallel> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="btnClose"> <Animations> <OnClick> <Sequence AnimationTarget="info"> <%-- Shrink the info panel out of view --%> <StyleAction Attribute="overflow" Value="hidden"/> <Parallel Duration=".3" Fps="15"> <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" /> <FadeOut /> </Parallel> <%-- Reset the sample so it can be played again --%> <StyleAction Attribute="display" Value="none"/> <StyleAction Attribute="width" Value="300px"/> <StyleAction Attribute="height" Value=""/> <StyleAction Attribute="fontSize" Value="12px"/> <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" /> <%-- Enable the button so it can be played again --%> <EnableAction AnimationTarget="AJAXPopUp1_btnInfo" Enabled="true" /> </Sequence> </OnClick> <OnMouseOver> <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" /> </OnMouseOver> <OnMouseOut> <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" /> </OnMouseOut> </Animations> </ajaxToolkit:AnimationExtender> </div>

what isphAnimation?


My control was done in the code behind almost exclusively. I only had design elements in the .ascx. phAnimation is a PlaceHolder so I could add the controls. Here is my .ascx file. There are some things that were refernced for various reasons in my code behind like"lblHelpItemTitle" but I did include them in the above code for brevity. All they are, are controls tied to public properties of the control so I can assign their values based on what I wanted in that particular instance. Also the script code should only be added once to the page, but that should be fairly easy now with the new stuff for registering JS in 2.0. Response.Write is probably not the way to go anymore, but it sloved the problem then. I had orginally had a public property that was a boolean telling me if this was the first instance of the control on the page and if it was I included the script.

1<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>23 <div>4 <div id="flyout<%=Me.ID%>" style="z-index:2;display: none; border: solid 1px #D0D0D0; background-color: #FFFFFF;overflow:hidden;"> </div>5 <div id="info<%=Me.ID%>" style="z-index:2;display: none; font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; width: 260px;">6 <div class="HelpItemTitleBar">7 <div class="HelpItemTitle">8 <asp:Label ID="lblHelpItemTitle" runat="server" />9 </div>10 <div class="HelpItemClose" id="btnCloseParent<%=Me.ID%>">11 <asp:LinkButton id="lbClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" />12 </div>13 </div>14 <div class="HelpItemText">15 <asp:Label ID="lblHelpText" runat="server" />16 </div>17 </div>18 </div>19 <asp:PlaceHolder id="phAnimation" runat="server" />

just to understand the code, i have implement your code in my test page and no errors found and why i run the page here is what i got:

Invalid Animation definition for TargetControlID="ibHelp": Name cannot begin with the '0' character, hexadecimal value 0x30. Line 1, position 82.

_aeOpen.Animations = sbOpen.ToString(); <<<<<<error

also i replace:
//Response.Write(sbScript.ToString);
this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"OnClick", sbScript.ToString());

here is the complete code for your reference:

<%@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="WebUserControl.ascx.cs"Inherits="usercontrols_WebUserControl" %><%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<div>

<divid="flyout<%=this.ID%>"style="z-index:2;display: none; border: solid 1px #D0D0D0; background-color: #FFFFFF;overflow:hidden;"></div>

<divid="info<%=this.ID%>"style="z-index:2;display: none; font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; width: 100px; height: 34px;">

<divclass="HelpItemTitleBar">

<divclass="HelpItemTitle">

<asp:LabelID="lblHelpItemTitle"runat="server"/>

</div>

<divclass="HelpItemClose"id="btnCloseParent<%=this.ID%>">

<asp:LinkButtonid="lbClose"runat="server"OnClientClick="return false;"Text="X"ToolTip="Close"/>

</div>

</div>

<divclass="HelpItemText">

<asp:LabelID="lblHelpText"runat="server"/>

</div>

</div>

</div>

<asp:PlaceHolderid="phAnimation"runat="server"/>

code behind:

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Text;public partialclass usercontrols_WebUserControl : System.Web.UI.UserControl{protected override void Render(HtmlTextWriter writer) { AjaxControlToolkit.AnimationExtender _aeOpen =new AjaxControlToolkit.AnimationExtender(); StringBuilder sbOpen =new StringBuilder(); StringBuilder sbScript =new StringBuilder(); ImageButton _ibHelp =new ImageButton(); sbScript.AppendLine("<script type='text/javascript' language='javascript'>"); sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {"); sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);"); sbScript.AppendLine(" top.style.position = 'absolute';"); sbScript.AppendLine(" top.style.top = location.y + 'px';"); sbScript.AppendLine(" top.style.left = location.x + 'px';"); sbScript.AppendLine(" if (!ignoreSize) {"); sbScript.AppendLine(" top.style.height = bottom.offsetHeight + 'px';"); sbScript.AppendLine(" top.style.width = bottom.offsetWidth + 'px';"); sbScript.AppendLine(" }"); sbScript.AppendLine(" }"); sbScript.AppendLine("</script>");//Response.Write(sbScript.ToString);this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"OnClick", sbScript.ToString()); _ibHelp.ID ="ibHelp"; _ibHelp.OnClientClick ="return false;"; _ibHelp.ImageUrl ="/admin/images/buttons/help.png"; _ibHelp.ToolTip ="Click For Help"; phAnimation.Controls.Add(_ibHelp); sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Opacity='0' /></OnLoad>"); sbOpen.AppendLine("<OnClick>"); sbOpen.AppendLine("<Sequence>"); sbOpen.Append("<ScriptAction Script='Cover($get('"); sbOpen.Append(_ibHelp.ClientID); sbOpen.Append("'), $get('flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine("'));' />"); sbOpen.Append("<StyleAction AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='block'/>;"); sbOpen.Append("<Parallel AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Duration='.3' Fps='25'>"); sbOpen.AppendLine("<Move Horizontal='150' Vertical='-50' />"); sbOpen.Append("<Resize Width300' Height='300' />");//'sbOpen.Append("<Color AnimationTarget='flyout") //'sbOpen.Append(Me.ID) //'sbOpen.AppendLine('" StartValue='#AAAAAA' EndValue='#FFFFFF' Property='style' PropertyKey='backgroundColor' />") //'sbOpen.AppendLine("</Parallel>") sbOpen.Append("<ScriptAction Script='Cover($get('flyout"); sbOpen.Append(this.ID); sbOpen.Append("'), $get('info"); sbOpen.Append(this.ID); sbOpen.AppendLine("'), true);' />"); sbOpen.Append("<StyleAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='block'/>"); sbOpen.Append("<FadeIn AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Duration='.2'/>"); sbOpen.Append("<StyleAction AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='none' />"); sbOpen.Append("<StyleAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='height' Value='auto'/>"); sbOpen.AppendLine("<Parallel Duration='.5'>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#666666' EndValue='#FF0000' Property='style' PropertyKey='color'/>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#666666' EndValue='#FF0000' Property='style' PropertyKey='borderColor'/>"); sbOpen.AppendLine("</Parallel>"); sbOpen.AppendLine("<Parallel Duration='.5'>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#FF0000' EndValue='#666666' Property='style' PropertyKey='color'/>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#FF0000' EndValue='#666666' Property='style' PropertyKey='borderColor'/>"); sbOpen.Append("<FadeIn AnimationTarget='btnCloseParent"); sbOpen.Append(this.ID); sbOpen.AppendLine(" MaximumOpacity='.9' />"); sbOpen.AppendLine("</Parallel>"); sbOpen.AppendLine("</Sequence>"); sbOpen.AppendLine("</OnClick>"); _aeOpen.ID ="aeOpen"; _aeOpen.TargetControlID ="ibHelp"; _aeOpen.Animations = sbOpen.ToString(); phAnimation.Controls.Add(_aeOpen); }}

Simple mistake. When you did the conversion you did not carry over the closing quote of some of the fields. For Example you have:

sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info");
sbOpen.Append(this.ID);
sbOpen.AppendLine(" Opacity='0' /></OnLoad>");

And It Should Be:

sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info");
sbOpen.Append(this.ID);
sbOpen.AppendLine("' Opacity='0' /></OnLoad>");

It is hard to see, but I added a closing quote before Opacity.


One more thing. If you plan to use more than one of these on any given page you will want to wrap the RegisterClientScript inside a conditional checking IsClientScriptRegistered.


thank you so much

one last question.

i'm planning to use the same usercontrol more then one in page

you mean this code should be wrap? like this?

if(!Page.IsClientScriptRegistered("myscript"))
{
sbScript.AppendLine("<script type='text/javascript' language='javascript'>");
sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {");
sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);");
sbScript.AppendLine(" top.style.position = 'absolute';");
sbScript.AppendLine(" top.style.top = location.y + 'px';");
sbScript.AppendLine(" top.style.left = location.x + 'px';");
sbScript.AppendLine(" if (!ignoreSize) {");
sbScript.AppendLine(" top.style.height = bottom.offsetHeight + 'px';");
sbScript.AppendLine(" top.style.width = bottom.offsetWidth + 'px';");
sbScript.AppendLine(" }");
sbScript.AppendLine(" }");
sbScript.AppendLine("</script>");
//Response.Write(sbScript.ToString);
this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"myscript", sbScript.ToString());

}

.


Yes. Otherwise you will get an error. Also I do not know if the AJAX toolkit has been improved in the latest version, but when I was using it it seemed that it added the animation scripts for each instance and after about 20 or so of these controls on a page the load time really slowed down. I would be interested to here how you fair if you do many on one page.


speed to me looks like good, i did not put any stuffs in it. may be.

but after implementingIsClientScriptRegistered i'm still getting the same data of a previous a previous and its not throwing me any error.

any idea?

i change the above code to something like this but still same problem:

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("rb-popup"))
{
this.Page.ClientScript.RegisterClientScriptBlock("rb-popup","js/JScript.js"
}


I don't understand the problem. Are you saying you have multiple controls but with the same data over and over? If so post the control code and the code for the page calling and I will see if I can find the problem.

No comments:

Post a Comment