Interactivity and Scripting - Adobe Edge Animate - page 146

If an element is represented by a container, which is the case for almost all ele-
ments in Edge Animate (the only exception is the use of the img tag for images),
you can also easily change the HTML content of the container. Thus, you can do
things like set new text for text elements with the function html() :

// Change the content of an element.
sym.$("MyText").html("new text");

Or, if you want to add text to already existing text, use the append() function:

sym.$("MyText").append("appended text");

This function is not just limited to setting simple texts. The following example
demonstrates how to use the html() - function to load a whole HTML form in a
rectangle created in Edge Animate:

4 Project
The files for this example can be
downloaded from http://edgebuch.
simonwidjaja.com
Project Name:
Interaction_HtmlAppend

sym.$("FormBox").html(
'Name: <input type="text« /><br/>'
+'Year of birth'
+'<select>'
+' <option value="1950">1950-1959</option>'
+' <option value="1960">1960-1969</option>'
+' <option value="1970">1970-1979</option>'
+' <option value="1980">1980-1989</option>'
+' <option value="1990">1990-1999</option>'
+' <option value="2000">2000-2010</option>'
+'</select>'
);

The three examples in action look as follows:

Figure 5.17
Adding the HTML code in action

In addition to HTML content, the CSS properties can also be changed with
code. This may be necessary if you want to use CSS properties that are not sup-
ported by Edge Animate. In the following example, a rectangle is to be filled in