Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added some user interaction to the demo page. #7

Merged
merged 3 commits into from

2 participants

@rexxars

No description provided.

@LeaVerou
Owner

Thanks! Can you please add a comment at the top of the new .js file? I.e. what the file does and your name as the author.

@rexxars

Sure, comment added!

@LeaVerou LeaVerou merged commit 470ddaa into LeaVerou:master
@LeaVerou
Owner

Merged, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
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);
Something went wrong with that request. Please try again.