HTML and CSS Reference
In-Depth Information
he progress tag does not support a min attribute but only a max attribute. The minimum value is assumed to
be zero. he value attribute specifies the current progress. Press F5 to debug the application and navigate to the
feedback form. The progress should appear as shown in Figure 3-19 .
Figure 3-19. The progress control in Opera
The code within the progress tag is used for browsers that do not support the progress tag. For example, in
IE9, the form would look like Figure 3-20 .
Figure 3-20. The progress control in IE9
Updating the Progress Bar
However, a static progress bar is not very interesting; one might even find a progress bar that never changes to be very
frustrating. Now you'll add some JavaScript code to update the progress bar as fields on the form have been entered.
First, you'll create a function called calculateProgress() that iterates through all the input fields to see
which ones have a value. There are six fields so you'll give each one a value of 17 (6 x 17 = 102). This code uses
the document.getElementsByClassName() selector that returns all elements with the specified class attribute.
In this case, you want elements with the “text = box single-line” class. The function then updates the value of the
progress bar using the computed value.
Then, you'll need to call this function whenever an input field is changed. To do that, you'll create a
function named bindEvents() and use the same getElementsByClassName() selector. This time, you'll use the
addEventListener() function to bind the calculateProgress() function to the onChange event. Finally, you'll
call bindEvents() function in the onLoad event handler.
Enter the code in bold from Listing 3-10 to your feedback form.
Listing 3-10. Adding JavaScript to update the progress bar
<meta name="viewport" content="width=device-width" />
<script type="text/JavaScript">
function calculateProgress() {
var value = 0;
var fieldList = document.getElementsByClassName("text-box single-line");
for (var i = 0; i < fieldList.length; i++) {
if (fieldList[i].value > "")
value += 17;
Search WWH ::

Custom Search