prevent repeat animation (animationextender)

Hey guys. I have a textbox which will expand when I click it. However, once expanded it's still obviously active and it will replay the animation when I click it again. How can I make the textbox expand (like the example below) when clicked, but then disable further animations of it? I obviously cant disable the textbox. I was thinking a conditionanimation would work but Im not that great with javascript.

<ajaxToolkit:AnimationExtender id="Ani" runat="server" TargetControlID="TextBox1"> <Animations> <OnClick> <Resize width="400px" duration="0.3" fps="10" /> </OnClick> </Animations></ajaxToolkit:AnimationExtender><asp:TextBox ID="TextBox1" Width="200px" TextMode="MultiLine" Rows="6" runat="server" />

Thanks /J

Hi,

Yeah , a conditional animation would be the way to go about this .

Try this Mark-Up ..

<
scriptlanguage="javascript">var expandCount = 1;var expandMaxCount = 1;
 
function ShouldIExpand()
{
var shouldExpand =false;
 
if ( expandCount <= expandMaxCount )
shouldExpand =
true;
expandCount++;
return shouldExpand ;
}
</script>

 <OnClick>
 
<ConditionConditionScript="ShouldIExpand()">
 <Resize width="400px" duration="0.3" fps="10" /></Condition> </OnClick> 
Hope this helps.
 
If it resolves the issue , please mark my reply as the answer

exactly what i had in mind, it works! Thanks

problem about Collapsed proterty of CollapsiblePanelExtender

i set Collapsed="true" and i found that the target panel was first Expanded then Collapsed with a visual effect after the page loaded.

i hope the panel keeps Collapsed without any visual effect.

anyone please helps me.

Here's my code to accomplish that. Hope it helps.

<asp:Image ID="Image2" runat="server" AlternateText="(Got Your PartNumber? Quick Order Here)"
ImageUrl="~/images/collapse.jpg" />
Quick Order<br />
<asp:Label ID="lblReplacementPart" runat="server" ForeColor="Red"></asp:Label>

<asp:Panel ID="PanelQuickOrder" runat="server">
<table class="contentText">
<tr>
<td colspan="2" nowrap="nowrap">
Enter Part Number:<br />
<asp:TextBox ID="txtPartNumber" runat="server"></asp:TextBox><br />
<i>format ####-######</i>
</td>
</tr>
<tr>
<td colspan="2">
Qty: <asp:TextBox ID="txtQOQty" runat="server" Width="25" Text="1"></asp:TextBox><br />
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnQO_AddCart" runat="server" Text="Add to Cart" OnClick="btnQO_AddCart_Click" /></td>
</tr>
</table>
</asp:Panel>

<ajax:CollapsiblePanelExtender ID="cpe2" runat="Server" AutoCollapse="False" AutoExpand="False"
CollapseControlID="Image2" Collapsed="True" CollapsedImage="~/images/expand.jpg"
CollapsedSize="2" CollapsedText="Got PartNumber? Use Quick Order" ExpandControlID="Image2"
ExpandDirection="Vertical" ExpandedImage="~/images/collapse.jpg" ExpandedSize="150"
ExpandedText="Got PartNumber? Use Quick Order" ImageControlID="Image2" ScrollContents="false"
SuppressPostBack="true" TargetControlID="PanelQuickOrder">
</ajax:CollapsiblePanelExtender>

Doraeimo,

I am actually having the same issue as you. if you watch the video on the collapsible panel you will notice that he uses a CssClass that sets the height of the content panel to 0px. this is suposed to "hide" the content panel at page load. it works very nicely for him in the video, so maybe it will work for you as well. However; setting the height directly in the panel definition, or in a cssclass does not do the trick for me. you should at least give it a try to see if that works for you !

Sorry to piggyback on your post here. but since it works in the video it may work for you, and maybe some one has some ideas as to why setting the height for me doesnt work.