Adding jQuery Animations to the HTML Page

How to:

This section of the tutorial provides steps on how to animate the parameter form object on your HTML page using jQuery animations.


Top of page

x
Procedure: How to Create Text for the Animation

In this procedure, you create the text container and the text that will guide users on how to view the parameter form object.

Note: You can sort the display of properties in the Properties panel by category or in alphabetical order. If you cannot locate a property in your display, select a different sorting option from the Properties panel toolbar.

  1. On the Components tab, in the Generic Elements group, click Text.
  2. Drag your mouse across the HTML canvas to create the text container.
  3. Right-click the text container, and click Edit text, or double-click the text container.
  4. Delete the default text, and then type Click to Show/Hide Parameters.
  5. Click the text container.
  6. In the Properties panel, under Core Attributes, in the Unique Identifier field, type animatedtxt.
  7. In the Properties panel, under Basic, Text, and Border, set the following property values. When you set the color property values, click the property arrow and use the Color Picker dialog box.
    1. Color: black
    2. Background-color: gray
    3. Width: 255px
    4. Height: 20px
    5. Border-color: black
    6. Border-style: solid
    7. Border-width: thin
    8. Text-align: center
    9. Border-radius: 15px
  8. Click the text container, press the Ctrl key, and click the report container.
  9. On the Positioning tab, in the Positioning group, click Left.

    An example of how your page may display is shown in the following image.

    Animate text example


Top of page

x
Procedure: How to Animate the Parameter Form Object

In this procedure, you add jQuery animations to the parameter form object using the Properties panel and the Tasks & Animations panel.

Note: You can sort the display of properties in the Properties panel by category or in alphabetical order. If you cannot locate a property in your display, select a different sorting option from the Properties panel toolbar.

  1. Click the parameters form object.
  2. In the Properties panel, under Core attributes, in the Unique Identifier field, type parameterform.
  3. In the Properties panel, under Layout, set the Display property value to none.

    An example of how your page may display is shown in the following image. You can adjust the space between the new text box, and the report if you want.

    Parameter form on HTML page

    Tip: The next steps in this procedure instruct you to change settings in the Tasks & Animations panel. To keep the panel open, dock the Tasks & Animations panel.

  4. In the Tasks & Animations panel, under the jQuery Animations section, click New.

    Animation1 appears in the List of list box.

  5. In the All Targets list box, click parameterform, and then click the Add from list icon. Parameterform appears in the Selected Targets list box.

    Note: You can also double-click parameterform to add it to the Selected Targets list box.

  6. In the Visibility area, click No Change.
  7. In the Effect area, in the Type list, click Slide: slide in/out.

    Additional options populate the Effect area.

  8. In the *Value list, click Left.
  9. In the Additional Properties area, select the Toggle animation check box.
  10. On the Quick Access Toolbar, click Save.
  11. In the Tasks & Animations panel, under the Tasks section, click New.
  12. In the Trigger Type list, click Click.
  13. In the Trigger Identifier area, click the All/selected only menu, and then click All.
  14. Select the animatedtxt check box.
  15. In the Requests/Actions area, click the Requests selections menu, point to Run Animation, and then click Animation1.
  16. In the Tasks & Animations panel, under the Tasks section, click New.
  17. In the Trigger Type list, click Click.
  18. In the Trigger Identifier area, select the formSubmit check box.

    Note: If you add or delete other parameter form objects from your page, the number associated with the form object might be different. Each object is assigned an iterative number that increases when you add a new object.

  19. In the Requests/Actions area, click the Requests selections menu, point to Run Animation, and then click Animation1.
  20. On the Quick Access Toolbar, click Save.

WebFOCUS