Permalink
Browse files

countdown timer for each slide

  • Loading branch information...
1 parent e158e08 commit a9273237cf64dd2f2a594744ec3b015145b8c2bd Oren committed Mar 31, 2012
Showing with 31 additions and 0 deletions.
  1. +3 −0 css/ignite.css
  2. +9 −0 index.html
  3. +19 −0 js/ignite.js
View
@@ -0,0 +1,3 @@
+.time {
+ display: none;
+}
View
@@ -91,6 +91,7 @@
-->
<link href="css/impress-demo.css" rel="stylesheet" />
+ <link href="css/ignite.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
@@ -166,6 +167,8 @@
-->
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
+ <div class='time'>
+ </div>
</div>
<!--
@@ -185,10 +188,14 @@
-->
<div class="step slide" data-x="0" data-y="-1500">
<q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
+ <div class='time'>
+ </div>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
+ <div class='time'>
+ </div>
</div>
<!--
@@ -360,6 +367,8 @@
Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;)
-->
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/ignite.js"></script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
View
@@ -1,16 +1,35 @@
(function() {
var index = 1;
+ var time = 14;
+ var times = $('.time');
function start() {
+ restartTimer();
var intervalID = setInterval(function() {
index += 1;
impress().next();
+ restartTimer();
if(index === 20) { window.clearInterval(intervalID) };
}, 15000);
};
+ function restartTimer() {
+ var intervalID2 = setInterval(function() {
+ var step = $('.step:nth-child(' + index + ')');
+ var timeElem = step.children('.time');
+ times.hide();
+ timeElem.show();
+ timeElem.text(time);
+ time -= 1;
+ if(time === 0) {
+ window.clearInterval(intervalID2)
+ time = 14;
+ };
+ }, 1000);
+ };
+
Ignite = {
start: start
};

0 comments on commit a927323

Please sign in to comment.