ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Client-Side Tasks for C1MultiPage > Setting the Duration of Animations at Run-Time

Setting the Duration of Animations at Run-Time

In this topic, you will write a client-side script that allows users to set the duration of a C1MultiPage control's animation effect at run-time.

To set the duration of an animation at run-time, complete the following steps:

1.   Add a new C1MultiPage control to your project.

2.   Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.

      The C1MultiPage Designer Form opens.

3.   Use the Add Child Item button  to add three pages to the C1MultiPage.

4.   In treeview, select C1MultiPage1 and set its Animation property to SlideRight.

5.   Click OK to close the C1MultiPage Designer Form.

6.   Place your cursor in the C1MultiPage and then add text or an arbitrary control to the first page of the control (see Adding and Manipulating Page Content for more information).

7.   Click C1MultiPage's smart tag () and select Move to next page from the menu. Once the second page is in focus, add text or an arbitrary control to the page. Repeat this step to add content to the third page.

8.   Click OK to close the C1MultiPage Designer Form.

9.   Click the Source tab to enter Source view and place the following JavaScript beneath the <HTML> tag:

 

<script language="javascript" type="text/javascript">

function SetDuration()

{

     var oPage = Sys.Application.findComponent("<%=C1MultiPage1.ClientID%>");

     oPage.set_duration(document.getElementById('TxtDuration').value);

}

</script>

 

10.  Add the following markup beneath the </cc1:C1MultiPage> tag to add a text box and button to the project. 

   

<input id="TxtDuration" type="text" size="3" value=""/><input id="SetEnabled" type="button" value="Set Duration" onclick="SetDuration()" />

 

11.  Run the program, enter a low number (such as 5) into the text box and press the Set Duration button. Use the navigation buttons to switch page views and observe that the animation barely registers. Now type "3500" into the text box, press the Set Duration button, and use the navigation buttons to switch page views. This time, the new page will slide in slowly from the left side of the control.


Send comments about this topic to ComponentOne.
Copyright 1987-2010 ComponentOne LLC. All rights reserved.