Content aware slide-out with AnimationExtender?

Hi,

I'm so close to getting this to work, but there's just onemissing issue. I'm trying to create a simple slide down animation, whena linkbutton is clicked. The content to show is just a block of textinside a div tag. I have a "slider" div tag that does the animation,like in the "flyout" div tag in the toolkit example video. Everythingjust about works fine, except that I've had a lot of trouble getting itto fit to the height of the content. I can't use a fixed height becauseI don't know how much content will be there. I've been able to get theheight after setting the style "height:auto" but now I don't know howto get it to interact with the animationextender. I saw that you can doanimations through javascript, but I've already written the animationin ASP, so I'm hoping there's an easy way to just tell the animationextender to look at the height of the div and use it to resize.

Here's my code:

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
2
3<%@dotnet.itags.org. Register Assembly="TDSAjaxExtensions" Namespace="TDSAjaxExtensions" TagPrefix="cc1" %>
4<%@dotnet.itags.org. Register Assembly="DateControls" Namespace="DateControls" TagPrefix="cc2" %>
5
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7
8<html xmlns="http://www.w3.org/1999/xhtml" >
9<head id="Head1" runat="server"><title>Test Page</title>
10</head>
11<body><form id="Form1" runat="server"><div>
12 <asp:ScriptManager ID="ScriptManager1" runat="server">
13 </asp:ScriptManager>
14 <table border="1" bordercolor="#000000">
15 <tr>
16 <td style="height: 25px" width="275"><br /><br /><br /><br />
17
18 <asp:LinkButton ID="btnInfo" OnClientClick="return false;" runat="server">LinkButton</asp:LinkButton>
19 <div id="slider" style="display:none;"></div>
20
21 <div id="hidden" style="height:0px;">
22<!-- Info panel to be displayed as a flyout when the button is clicked -->
23 <div id="info" style="display:block; width:auto; height: auto; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
24 Once you get the general idea of the animation's markup, you'll want to play a bit. All of
25 the animations are created from simple, reusable building blocks that you can compose together.
26 Before long you'll be creating dazzling visuals. By grouping steps together and specifying
27 them to be run either in sequence or in parallel, you'll achieve almost anything you can
28 imagine, without writing a single line of code!
29 <div id="btnCloseParent" style="opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">
30 <asp:LinkButton id="btnClose" runat="server"
31 OnClientClick="return false;"
32 Text="Minimize" ToolTip="Close"/>
33 </div>
34 </div>
35
36 <script language="javascript" type="text/javascript">
37 //just getting the absolute dimensions and setting that as the style
38 var height = document.getElementById("info").offsetHeight;
39 document.getElementById("info").style.height = height + "px";
40 document.getElementById("hidden").style.height = height + "px";
41 var width = document.getElementById("info").offsetWidth;
42 document.getElementById("info").style.width = width + "px";
43 document.getElementById("hidden").style.width = width + "px";
44 </script>
45
46 <script type="text/javascript" language="javascript">
47 // Move an element directly on top of another element (and optionally
48 // make it the same size)
49 function Cover(bottom, top, ignoreSize) {
50 var location = Sys.UI.DomElement.getLocation(bottom);
51 top.style.position = 'absolute';
52 top.style.top = location.y + 'px';
53 top.style.left = location.x + 'px';
54 if (!ignoreSize) {
55 top.style.height = bottom.offsetHeight + 'px';
56 top.style.width = bottom.offsetWidth + 'px';
57 }
58 }
59 </script>
60
61 <ajaxToolkit:AnimationExtender ID="MyExtender" runat="server" TargetControlID="btnInfo">
62 <Animations>
63 <OnClick>
64 <Sequence>
65<%-- Fadeout the "More Details" button --%>
66 <Fadeout AnimationTarget="btnInfo" Duration=".095" FPS="15" />
67 <StyleAction AnimationTarget="btnInfo" Attribute="visibility" Value="hidden" />
68<%--<StyleAction AnimationTarget="slider" Attribute="width" Value="info.style.width" />--%>
69 <StyleAction AnimationTarget="slider" Attribute="height" Value="0px" />
70 <StyleAction AnimationTarget="slider" Attribute="display" Value="block" />
71 <StyleAction AnimationTarget="slider" Attribute="borderStyle" value="solid" />
72 <StyleAction AnimationTarget="slider" Attribute="borderWidth" value="1px" />
73 <parallel AnimationTarget="slider" Duration=".1" fps="20" >
74 <fadein />
75 <Resize AnimationTarget="slider" Width="275" Height="/*THIS IS WHERE I NEED THE CLIENT SIDE HEIGHT*/" />
76 </parallel>
77
78 <StyleAction AnimationTarget="slider" Attribute="height" value="/*THIS IS WHERE I NEED THE CLIENT SIDE HEIGHT*/" />
79<%-- Slide out the Details panel --%>
80 <%--<StyleAction AnimationTarget="info" Attribute="display" Value="block"/>
81 <Parallel AnimationTarget="info" Duration=".1" Fps="20">
82 <fadein />
83 </Parallel>--%>
84 <%-- Enable the button --%>
85 <EnableAction AnimationTarget="btnInfo" Enabled="false" />
86 </Sequence>
87 </OnClick>
88 </Animations>
89 </ajaxToolkit:AnimationExtender>
90
91 <ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
92 <Animations>
93 <OnClick>
94 <Sequence>
95 <StyleAction AnimationTarget="info" Attribute="fontSize" Value="0px" />
96
97<%-- Shrink the panel out of view --%>
98 <Parallel AnimationTarget="info" Duration=".2" Fps="15">
99 <Resize width="100%" height="0px" />
100 <fadeout />
101 </Parallel>
102<%-- Reset the target --%>
103 <StyleAction AnimationTarget="info" Attribute="visibility" Value="hidden"/>
104 <StyleAction AnimationTarget="info" Attribute="width" Value="250px"/>
105 <StyleAction AnimationTarget="info" Attribute="height" Value="0px"/>
106 <StyleAction AnimationTarget="info" Attribute="fontSize" Value="0px"/>
107<%-- Enable the button --%>
108 <StyleAction AnimationTarget="btnInfo" Attribute="visibility" Value="visible" />
109 <EnableAction AnimationTarget="btnInfo" Enabled="true" />
110 <Fadein AnimationTarget="btnInfo" Duration=".092" FPS="15" />
111 </Sequence>
112 </OnClick>
113 </Animations>
114 </ajaxToolkit:AnimationExtender>
115 </td>
116 <td style="width: 3px; height: 25px">
117 </td>
118 <td style="width: 3px; height: 25px">
119 </td>
120 </tr>
121 <tr>
122 <td style="height: 21px">
123 </td>
124 <td style="width: 3px; height: 21px">
125 </td>
126 <td style="width: 3px; height: 21px">
127 </td>
128 </tr>
129 </table>
130
131
132</div></form></body>
133</html>

So basically where I put "THISIS WHERE I NEED THE CLIENT SIDE HEIGHT" is where I need something alongthe lines of a javascript variable, or to point to the height of the"info" panel. Or of course if there is an easier way to do this thatI'm totally missing that would be good to know obviously.

Please let me know if that was way to confusing to follow, I'd really like to get this working.

-Matt

Hi.

use Dynamic Animation Properties .

Change
<Resize AnimationTarget="slider" Width="275" Height="/
to be :
<Resize AnimationTarget="slider" Width="275" HeightScript="functiontoCalculateheight();"/
function functiontoCalculateheight(){
//This function will do something to calculate the content height and return me the height.
//ex :
return $get("contentDiv").offsetHeight;
}
Hope this helps.

Yep, thats exactly what I needed. Thank you so much!

-Matt

Conditional Animation

Hi all,

I have an animation question.

I have a delete button and confirm delete button. So when you first click delete, I would show you the confirm delete button. After you click the confirm delete button, then i will delete the items.

The animation i would like is when you click "Delete", the area where the confirm delete button "FadeIn", and when you click "ConfirmDelete", first, a message will be display in the area stating that certain records has been deleted, while the area where the confirm delete button is slowly fade out. Liek the typical basecamp type of thing.

The problem I'm having is when Delete button is clicked, at first it did "FadeIn", but without confirmdelete button clicked, it faded out by itself. What am I doing wrong? If I take out the "fadeout" tag, and I have a conditional statement there. seems like it's working. Only when the "confirmDelete" button is clicked, would the script execute. As soon as I put the "fadeout" tag back in, i don't udnerstand why "fadout" was execute automatically.

<atlas:UpdatePanelID="UpdatePanel1"runat="server"Mode="conditional">

<ContentTemplate>

<divid="Warning"visible="false"runat="Server">

<p><asp:LiteralID="WarningMessage"runat="server"/></p>

<divclass="confirm">

<asp:ButtonID="ConfirmDeleteTrash"CssClass="ctrolSubmit"Text="Delete"OnClick="DeleteOrTrashItems"runat="server"/> or<ahref="#">Cancel</a>

</div>

</div>

</ContentTemplate>

<Triggers>

<atlas:ControlEventTriggerControlID="Delete"EventName="Click"/>

<atlas:ControlEventTriggerControlID="ConfirmDeleteTrash"EventName="Click"/>

</Triggers>

</atlas:UpdatePanel>

<atlasToolkit:UpdatePanelAnimationExtenderID="upae"runat="server">

<atlasToolkit:UpdatePanelAnimationPropertiesTargetControlID="UpdatePanel1">

<Animations>

<OnUpdating>

<FadeInDuration="2"Fps="25"

AnimationTarget="Warning"

minimumOpacity=".2"

/>

</OnUpdating>

<OnUpdated>

<Sequence>

<Parallelduration="5"Fps="25">

<ConditionConditionScript="$('ConfirmDeleteTrash').click">

<FadeOut/>

<ScriptActionScript="alert('ConfrimDeleteTrash cicked!');"/>

</Condition>

</Parallel>

</Sequence>

</OnUpdated>

</Animations>

</atlasToolkit:UpdatePanelAnimationProperties>

</atlasToolkit:UpdatePanelAnimationExtender>

Hi,

This seems to be a duplicate of the post inthis thread.

Thanks,
Ted

Condition Animation Slow

Here is the code. I also had OnMouseOver event that had a condition ofdocument.getElementById('SreryBio').style.display!='block'" then change pic. This was also slow I had to keep the ouse over target for a while til the pic changed.

Any ideas how to make this faster?

1<Condition ConditionScript="document.getElementById('SreryBio').style.display=='block'">2 <Parallel AnimationTarget="SreryBio" Duration=".5" Fps="30">3 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />4 <FadeOut />5 <ScriptAction Script="document.getElementById('ctl00_Side_SreryLink').src='Images/BSCI_-team_srery.jpg';" />6 </Parallel>78 <Condition ConditionScript="document.getElementById('RoderickBio').style.display=='block'">9 <Parallel AnimationTarget="RoderickBio" Duration=".5" Fps="30">10 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />11 <FadeOut />12 <ScriptAction Script="document.getElementById('ctl00_Side_RoderickLink').src='Images/BSCI_-team_roderick.jpg';" />13 </Parallel>1415 <Condition ConditionScript="document.getElementById('HarrisonBio').style.display=='block'">16 <Parallel AnimationTarget="HarrisonBio" Duration=".5" Fps="30">17 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />18 <FadeOut />19 <ScriptAction Script="document.getElementById('ctl00_Side_HarrisonLink').src='Images/BSCI_-team_harrison.jpg';" />20 </Parallel>21 <Condition ConditionScript="document.getElementById('YeakelBio').style.display=='block'">22 <Parallel AnimationTarget="YeakelBio" Duration=".5" Fps="30">23 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />24 <FadeOut />25 <ScriptAction Script="document.getElementById('ctl00_Side_YeakelLink').src='Images/BSCI_-team_yeakel.jpg';" />26 </Parallel>27 <Condition ConditionScript="document.getElementById('MaldoBio').style.display=='block'">28 <Parallel AnimationTarget="MaldoBio" Duration=".5" Fps="30">29 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />30 <FadeOut />31 <ScriptAction Script="document.getElementById('ctl00_Side_MaldoLink').src='Images/BSCI_-team_maldonado.jpg';" />32 </Parallel>33 <Condition ConditionScript="document.getElementById('YatoomaBio').style.display=='block'">34 <Parallel AnimationTarget="YatoomaBio" Duration=".5" Fps="30">35 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />36 <FadeOut />37 <ScriptAction Script="document.getElementById('ctl00_Side_YatoomaLink').src='Images/BSCI_-team_yatooma.jpg';" />38 </Parallel>39 <Condition ConditionScript="document.getElementById('RayBio').style.display=='block'">40 <Parallel AnimationTarget="RayBio" Duration=".5" Fps="30">41 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />42 <FadeOut />43 <ScriptAction Script="document.getElementById('ctl00_Side_RayLink').src='Images/BSCI_-team_ray.jpg';" />44 </Parallel>4546 </Condition>47 </Condition>48 </Condition>49 </Condition>50 </Condition>51 </Condition>52 </Condition>

Hi boricua,

The animation framework wasn't designed to include that much logic. Keep in mind that all that script is dynamically evaled every time the mouse hovers over your element (which is terribly inefficient as it doesn't change, etc.). You should really pull all of that out into regular JavaScript that creates/plays an animation when one of those conditions is satisfied. It looks like the animation is the same for all of them too, so you have the potential to make this really fast/smooth.

Thanks,
Ted