Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
position
all
alt
ch
dir
id
min
rel
top
url
URL
urn
Collapse the table of content
Expand the table of content

position property

Returns the quotient of value/max when the value attribute is set (determinate progress bar), or -1 when the value attribute is missing (indeterminate progress bar).

This property is read-only.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.16Internet Explorer 10

 

Syntax

JavaScript
fValue = object.position

 

Property values

Type: Floating-point

If determinate, returns the result of the current value divided by the maximum value, otherwise -1.

Standards information

Remarks

When the value attribute is omitted from a progress element, the element is indeterminate. The progress element shows activity, but not how much progress has actually been made.

If the value attribute is used without a max value, the range is from 0 to 1.

The following example displays the current value of the position property when the progress bar is changed.


<html>
<head>
    <title>Progress bar example</title>
    <style type="text/css">
    #pbar
    {
        /* style the progress bar */
        border: 1px solid black;
        color: Blue;
        background-color:Yellow;
        }
    </style>

    <script type="text/javascript">
        function goingUp() {
            // add 5% to value
            var pBar = document.getElementById("pbar");
            if (pBar.value <= (pBar.max - 5)) {
                pbar.value += 5;
            }
            checkStatus();
        }

        function checkStatus() {
            // Shows position and value
            // -1 for indeterminate, otherwise current value divided by max.
            var pBar = document.getElementById("pbar");
            document.getElementById("positionStatus").innerHTML = "Value: " + pBar.value;
            document.getElementById("positionStatus").innerHTML += "<br/>Position: " + pBar.position.toFixed(3);
        }

        function toggle() {
            var pBar = document.getElementById("pbar");
            if (pBar.hasAttribute("value")) {
                //  Removing the value attribute makes the progress bar indeterminate
                pBar.removeAttribute("value");
                document.getElementById("tgl").innerHTML = "Make determinate";
            } else {
                //  Setting the value attribute makes the progress bar determinate
                pBar.value = 5;
                document.getElementById("tgl").innerHTML = "Make indeterminate";
            }
            checkStatus();
        }

</script>
</head>
<body onload="checkStatus();">
<h1>Progress bar test</h1>
  <p>Click Up to change to a determinate bar and use buttons move the progress up or down by 5% increments.</p>
  <div>
    <label id="progLabel">Progress: <progress id="pbar" max="100">Put alternate display here</progress></label>
    <button onclick="goingUp();">Up</button>
    <button id= "tgl" onclick="toggle();">Make determinate</button>
</div>
<div id="positionStatus"></div>
</body>
</html>


See also

HTMLProgressElement

 

 

Show:
© 2015 Microsoft