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
No comments:
Post a Comment