progress bar is now a div and uses the same transition + easing as slides (fixes #6)

diff --git a/README.md b/README.md
index a9aeccd026cbe483eaaa0193c1149561c61214fc..516add428fd4789e251963f8a1f270dbe4db47c6 100644 (file)
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak
 
 # Examples
 
+* http://lab.hakim.se/reveal-js/ (original)
 * http://www.ideapolisagency.com/ from [@achrafkassioui](http://twitter.com/achrafkassioui)
 * http://lucienfrelin.com/ from [@lucienfrelin](http://twitter.com/lucienfrelin)
 

diff --git a/css/main.css b/css/main.css
index 25a45a6dea24c691d7759d8f30dda2b2d2deb470..95971231c11eab724eaf192035698b010a6d5460 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -131,9 +131,9 @@ h1 {
           -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;
        
-       -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
-          -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
-            -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
+       -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+          -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+            -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
                transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
@@ -447,32 +447,28 @@ section img {
  * PROGRESS BAR
  *********************************************/
 
-progress::-webkit-progress-bar {
-       background: rgba(0,0,0,0.2);
-}
-
-progress::-moz-progress-bar {
-       background: hsl(185, 85%, 50%);
-}
-
-progress::-webkit-progress-value {
-       background: hsl(185, 85%, 50%);
-}
-
-progress {
+.progress {
        position: absolute;
        display: none;
        height: 4px;
        width: 100%;
        bottom: 0;
        left: 0;
-       padding: 0;
-       margin: 0;
 
-       border: 0;
-       outline: 0;
-       background: none;
+       background: rgba(0,0,0,0.2);
 }
+       
+       .progress span {
+               display: block;
+               background: hsl(185, 85%, 50%);
+               height: 100%;
+               width: 0px;
+
+               -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+                  -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+                    -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+                       transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+       }
 
 /*********************************************
  * ROLLING LINKS

diff --git a/index.html b/index.html
index b9fe4aef631edb9e1aea29b48bd2b966aca219ee..2e7a002aeb726a03f1e7ffaa87ed15289171b5ee 100644 (file)
--- a/index.html
+++ b/index.html
@@ -179,7 +179,7 @@ linkify( 'a' );
                </aside>
 
                <!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
-               <progress min=0 max=100 value=0></progress>
+               <div class="progress"><span></span></div>
                
                <script src="js/reveal.js"></script>
                <script src="lib/highlight.js"></script>
@@ -200,6 +200,8 @@ linkify( 'a' );
 
                        hljs.initHighlightingOnLoad();
                </script>
+
+
                
        </body>
 </html>
\ No newline at end of file

diff --git a/js/reveal.js b/js/reveal.js
index c3323247a4e5a5a139eda71c8ce9eafb010cf1d9..79437aed511d15c4eddd85b07004b395c72df84b 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -94,7 +94,8 @@ var Reveal = (function(){
         */
        function initialize( options ) {
                // Cache references to DOM elements
-               dom.progress = document.querySelector( 'body>progress' );
+               dom.progress = document.querySelector( 'body>.progress' );
+               dom.progressbar = document.querySelector( 'body>.progress span' );
                dom.controls = document.querySelector( '.controls' );
                dom.controlsLeft = document.querySelector( '.controls .left' );
                dom.controlsRight = document.querySelector( '.controls .right' );
@@ -122,7 +123,6 @@ var Reveal = (function(){
 
                if( config.progress ) {
                        dom.progress.style.display = 'block';
-                       dom.progress.max = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1;
                }
 
                if( config.theme !== 'default' ) {
@@ -313,7 +313,7 @@ var Reveal = (function(){
 
                // Update progress if enabled
                if( config.progress ) {
-                       dom.progress.value = indexh;
+                       dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
                }
 
                updateControls();