Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #7 from rexxars/master

Added some user interaction to the demo page.
  • Loading branch information...
commit 470ddaa3cac3fad5cfe4936dea158603aafb31d7 2 parents 9985501 + 3a5f028
@LeaVerou authored
Showing with 58 additions and 0 deletions.
  1. +14 −0 index.html
  2. +44 −0 user-interaction.js
View
14 index.html
@@ -40,6 +40,19 @@
</li>
</ul>
+ <h2>Dynamic demo</h2>
+ <ul>
+ <li id="dynamicProgress">
+ <label>Progress: <span class="percentage">0</span>%
+ <progress value="0" max="100"></progress>
+ </label>
+ </li>
+ </ul>
+ <p>
+ <button id="animateFully">Animate to 100%</button>
+ <button id="animateToUserInput">Animate to...</button>
+ </p>
+
<h2>Features</h2>
<ul>
<li>Accessible (WAI-ARIA-enabled)</li>
@@ -70,5 +83,6 @@
<script src="progress-polyfill.js"></script>
<script src="tests.js"></script>
+ <script src="user-interaction.js"></script>
</body>
</html>
View
44 user-interaction.js
@@ -0,0 +1,44 @@
+/*
+ * Interaction demos for the <progress> polyfill
+ * Demonstrates setting the progress value through Javascript
+ * @author Espen Hovlandsdal http://rexxars.com
+ */
+(function(d) {
+ var bind = function(el, event, fn) {
+ if (el.addEventListener) {
+ el.addEventListener(event, fn, false);
+ } else {
+ el.attachEvent('on' + event, fn)
+ }
+ };
+
+ var dyn = d.getElementById('dynamicProgress'), timer, progress = 0;
+ var el = dyn.getElementsByTagName('progress')[0];
+ var perc = dyn.getElementsByClassName('percentage')[0];
+
+ var progressTo = function(to) {
+ clearInterval(timer);
+ var inc = to < el.value ? -1 : 1;
+
+ timer = setInterval(function() {
+ progress += inc;
+ el.value = progress;
+
+ perc.innerHTML = progress;
+
+ if (progress == to) {
+ return clearInterval(timer);
+ }
+ }, 25);
+ };
+
+ bind(d.getElementById('animateFully'), 'click', function() {
+ progressTo(100);
+ });
+
+ bind(d.getElementById('animateToUserInput'), 'click', function() {
+ var to = parseInt(prompt('How many percent?', 50), 10);
+ progressTo(Math.max(0, Math.min(100, to)));
+ });
+
+})(document);
Please sign in to comment.
Something went wrong with that request. Please try again.