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
<head>
<meta name="viewport" content="width=device-width" />
<title>Feedback</title>
<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;
}
