2012年3月28日水曜日

Resizing a panel using Animation Extender

Hi Everyone,

I have 3 rows of images on my form and each row has 3 images as well. I want to have a effect so that when the user hovers on a row than that row expands itself and the rest of the rows remain the same size.

To do this I used 3 panels and in each panel I inseted a table so as to accomodate the 3 images.

Then to add the Hover effect I used the Animation extender control. The code that I used is given below.

<cc1:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1">

<Animations>

<OnHoverOver>

<ParallelDuration=".1"fps="50">

<ResizeWidth="250"Height="260" />

</Parallel>

</OnHoverOver>

</Animations>

</cc1:AnimationExtender>

However this doesn't seem to work. Any idea about why this is happening. It seems to me that I am making a really basic mistake but I have been trying to make this work for quite some days with no success.

If anyone has any idea what the problem is here please let me know.

Thanks

Hi,

I created a sample that works fine according to your description, please try it:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr> <td> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Add.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Image1"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/edit.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Image2"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/delete.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="Image3"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </form></body></html>

Thanks Raymond that surely helps....

However I have another problem and it will be great if you can have a look at that also....

http://forums.asp.net/p/1168745/1950736.aspx#1950736

Thanks in advance

vishy

0 件のコメント:

コメントを投稿