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

Rollovers with update panel not working?

Hello all,

I got a master page which containsjavascript generated by imageready for the rollover effect. I have acontent page which contains textbox, image button, updatepanel (Atlas)with Partial Rendering=True and gridview. Everything works fine in thebeginning. But once I sort, filter the grid view, the grid viewchanges as it should but now my rollovers don't work. I seems that thefunction that the onmouseover is not firing. I can still mess with thegridview that works fine. Oh yea the image button also has rolloverstate, that works but that is not calling the imageready function. Ithas inline javascript onmouserover="this.src='imgOver.gif';". I'malittle confused why the functions are not firing after the callback. Any ideas will be appreciated.

Thank YouPhotoshop's generated javascript uses a global boolean variable calledpreloadFlag. It sets this value to false globally, so I guess when a call back happens this line was being executed and sset back to false from being true. So none of the rollovers worked. I set it to true and the roll overs worked.

Hi boricua,

Here's a procedure you can adapt to your needs. Just call it for each ImageButton from the Page_Load. I've only tested this on IE 6, so let me know if it gives you any trouble.

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.LoadIfNot (Page.IsPostBack)Then

rollover3State(imgArrowLeft,

"ArrowLeft")
rollover3State(imgArrowRight,"ArrowRight")EndIfEndSubProtectedSub rollover3State(ByVal btnObjectAs ImageButton,ByVal baseImageAsString)

btnObject.Attributes.Add(

"onmouseout","{this.src='" &Me.ResolveUrl("App_Themes/" &Me.StyleSheetTheme &"/images/btn_" & baseImage &"_0.gif") &"';}")

btnObject.Attributes.Add(

"onmouseover","{this.src='" &Me.ResolveUrl("App_Themes/" &Me.StyleSheetTheme &"/images/btn_" & baseImage &"_1.gif") &"';}")

btnObject.Attributes.Add(

"onmousedown","{this.src='" &Me.ResolveUrl("App_Themes/" &Me.StyleSheetTheme &"/images/btn_" & baseImage &"_2.gif") &"';}")EndSub

Yeah this works. I used this method on some pages that I manually created, but for the ones that the html was created by imageready, which creates the javascript as well I fixed with the method I described earlier thank you dbDan.