I'm in a desperate situation. I've already gone over on the number of hours. The client is unhappy. I've been spending too many hours on this simple problem. If anyone can help me, I'd more than appreciate it.

 Click on the side menu, in Firefox and see it collapse. Now, do the same on IE7. I need it to work on IE7 like it does on FireFox.

 I'm using animation extender. I did not use collapsible panel because I wouldn't have control over FPS and duration. I also could not get the "expandedsize" and "collapsedsize" to work at all.

Any help with the animationextender would be very much appreciated.

I am willing to pay for the answer to this.  

Thank you so much.

-Jeff

Hi Jeff,

I'm not sure if I can help but I'd like to look into the problem.

Could you provide some working code that replicates the behavior I see on test.aspx?

Without code I can't do anything ;)

Kind regards,
Wim

A look at your code will help, also how does it look on IE6.. Actually it works in IE7 but not on FF as I checked and fine too in ie 6

naturehermit:

A look at your code will help, also how does it look on IE6..

Well, the same as in IE7 I guess (havent got the 7 here)

But in IE6 the yellow div stays open, and it's just the blue one that collapses and expands

 They look the same, but I need the div's to move the same way for both of them. It's causing major problems when this is implemented with the full site. I stripped this page out to lave just the two main div layers and panels. So you see, I need the div layers to act as they do on Firefox. 

Any help would be much appreicated. 

Ok, here's the code:

<tr>

<div id="softbady">

<div id="collapse" >

<div id="collapser">

<a href="#">

<asp:Image ID="collapserClose" AlternateText="Collapser" Style="display:block;" ImageUrl="/images/collapser.gif" width="25" height="125" runat="server" />

<asp:Image ID="collapserOpen" AlternateText="Collapser" Style="display:none;" ImageUrl="/images/collapser.gif" width="25" height="125" runat="server" />

</div>

</asp:Panel>

</td>

<asp:Panel ID="pSideMenu2" style="position: relative;" runat="server">

</td>

</table>

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="collapserClose">

<Animations>

<OnClick>

<Sequence>

<parallel Duration=".25" Fps="25">

<resize AnimationTarget="pSideMenu" width="10px" />

<Move AnimationTarget="pSideMenu" Duration=".3" Fps="25" Horizontal="-180" />

</parallel>

<StyleAction AnimationTarget="collapserClose" Attribute="display" Value="none"/>

<StyleAction AnimationTarget="collapserOpen" Attribute="display" Value="block"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="collapserOpen">

<Animations>

<OnClick>

<Sequence>

<parallel Duration=".25" Fps="25">

<resize AnimationTarget="pSideMenu" width="197px" />

<Move AnimationTarget="pSideMenu" Duration=".3" Fps="25" Horizontal="180" />

</parallel>

<StyleAction AnimationTarget="collapserClose" Attribute="display" Value="block"/>

<StyleAction AnimationTarget="collapserOpen" Attribute="display" Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

I'm just going to use collapsible panel instead. I managed to get the expandedsize to work. I would have rather used the animation as it looks much cleaner, but collapsible panel will do. Thanks for the help tho guys!

Hi jpham79,

Isn't the following example what you are looking for?

I didn't work with the move, but just the resize.

It works both in IE6 and FF

	  <table style="border-style: solid;">
		<tr>
		  <td style="border: solid 5px yellow;">
			<!--##############################-->
			<!-- Collapsible Panel -->
			<asp:Panel ID="pSideMenu" Style="width:100px; background-color:AntiqueWhite;" runat="server">
			<div align="right">
			<asp:Image ID="collapserClose" AlternateText="Collapser" Style="display:block; position:relative; top:0px; right:0px;" ImageUrl="collapser.gif" width="25" height="125" runat="server" />
			<asp:Image ID="collapserOpen" AlternateText="Collapser" Style="visibility:hidden; display:block; position:relative; top:-125px; right:0px;" ImageUrl="collapser.gif" width="25" height="125" runat="server" />
			</div>
			</asp:Panel>
			<!--##############################-->
		  </td>
		  <td style="border: solid 5px green; width: 100%;">
			<asp:Panel ID="pSideMenu2" runat="server">
			Test
			</asp:Panel>
		  </td>
		</tr>
	  </table>
	  <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="collapserClose">
		<Animations>
		<OnClick>
		  <Sequence>
			<parallel Duration=".25" Fps="25">
			  <resize AnimationTarget="pSideMenu" width="25px" />
			</parallel>
			<StyleAction AnimationTarget="collapserClose" Attribute="visibility" Value="hidden"/>
			<StyleAction AnimationTarget="collapserOpen" Attribute="visibility" Value="visible"/>
		  </Sequence>
		</OnClick>
		</Animations>
	  </cc1:AnimationExtender>
	  <cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="collapserOpen">
		<Animations>
		  <OnClick>
			<Sequence>
			  <parallel Duration=".25" Fps="25">
				<resize AnimationTarget="pSideMenu" width="100px" />
			  </parallel>
			  <StyleAction AnimationTarget="collapserClose" Attribute="visibility" Value="visible"/>
			  <StyleAction AnimationTarget="collapserOpen" Attribute="visibility" Value="hidden"/>
			</Sequence>
		  </OnClick>
		</Animations>
	  </cc1:AnimationExtender>

Kind regards,
Wim