Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1408
  • Last Modified:

AJAX Resize Animation

I have an AJAX update panel that I'm resizing with the "OnUpdating" event.  I resize the height, but then when the "OnUpdated" event runs, I can't figure out how to resize the panel to the original height, which is different everytime the pages loads, depending on the amount of data for the specified user account.

My question is, "How do I get the update panel to resize to the original size using the 'UpdatePanelAnimationExtender' extender when the 'OnUpdated' event runs."


<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UDPExposedCoverage" runat="server">
            <Animations >
                <OnUpdating> 
                    <Sequence>
                        <EnableAction Enabled="false" />
                          <Parallel Duration=".2" fps="24">
                              <Resize Height=".01" Unit="px" />
                          </Parallel>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <EnableAction Enabled="true" />
                          <Parallel Duration=".2" fps="24">
                              <Resize Height="100" Unit="px" />
                          </Parallel>
                    </Sequence>
                </OnUpdated>
            </Animations>
        </cc1:UpdatePanelAnimationExtender>

Open in new window

0
Unzip_The_Ripper
Asked:
Unzip_The_Ripper
1 Solution
 
Unzip_The_RipperAuthor Commented:
I'm going to have to answer this for myself.  Hahaha.

Okay, here's the answer to this question:

You have to add a 'ScriptAction' to grab the '_OriginalHeight' value of the animation and then add a 'HeightScript' value that holds the script to find the value you stored.  See attached script.  Make sure if you are using my example below to set the 'BehaviorID' of the extender to "animation" for the 'ScriptAction' to work.



        <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" BehaviorID="animation"
                TargetControlID="UDPExposedCoverage" runat="server">
            <Animations >
                <OnUpdating> 
                    <Sequence>
                        <ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight; " />
                        <EnableAction Enabled="false" />
                          <Parallel Duration=".2" fps="24">
                              <Resize Height=".01" Unit="px" />
                          </Parallel>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <EnableAction Enabled="true" />
                          <Parallel Duration=".2" fps="24">
                              <Resize HeightScript="$find('animation')._originalHeight" Unit="px" />
                          </Parallel>
                    </Sequence>
                </OnUpdated>
            </Animations>
        </cc1:UpdatePanelAnimationExtender>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now