move the slide-number out of the controls to a proper position and little fix to...

diff --git a/css/reveal.css b/css/reveal.css
index 6dc6594c9b325e5597d48c5fc698120c81cb1fe5..77494bd4ceb31870bf9206db0a4cd143f6b738a1 100644 (file)
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -391,15 +391,6 @@ body {
                transition: all 0.2s ease;
 }
 
-.reveal .controls .slide-number {
-       font-size: 11px;
-       top: 10px;
-       left: -10px;
-       opacity: 0.5;
-       width: 45px;
-       text-align: center;
-}
-
 .reveal .controls div.enabled {
        opacity: 0.7;
        cursor: pointer;
@@ -485,6 +476,21 @@ body {
                        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
        }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+
+.reveal .slide-number {
+       position: fixed;
+       display: block;
+       opacity: 0.5; 
+       z-index: 31;
+       width: 110px;
+       bottom: 58px;
+       right: 11px;
+       font-size: 12px;
+       text-align: center;
+}
 
 /*********************************************
  * SLIDES

diff --git a/css/theme/beige.css b/css/theme/beige.css
index fd80f70d8a5783d617eaf348b3b0245fbc2d985c..7caa3d88395cd037ffabaac24823d73c28d8ecdf 100644 (file)
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -115,10 +115,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #8b743d; }
 
-.reveal .controls .slide-number {
-  color: #8b743d;
-}
-
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #c0a86e; }
 
@@ -131,6 +127,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #c0a86e; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #8b743d;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/default.css b/css/theme/default.css
index 09e2055d9ffc1327bb4ee99045a6efe1ea4e4d1a..60c40a31aba24c1abefb94cd1a0b6f0b11423b39 100644 (file)
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -115,10 +115,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #13daec; }
 
-.reveal .controls .slide-number {
-  color: #13daec;
-}
-
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #71e9f4; }
 
@@ -131,6 +127,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #71e9f4; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #13daec;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/moon.css b/css/theme/moon.css
index 44dfe85d850d39de3ab362dc4e11d4dbaefaa5ff..13831ac4abb35f65349724466133a504a765356c 100644 (file)
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -115,10 +115,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #268bd2; }
 
-.reveal .controls .slide-number {
-  color: #268bd2;
-}
-
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
@@ -131,6 +127,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #78b9e6; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #268bd2;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/night.css b/css/theme/night.css
index 7aaf9603b3922b696e17e3e36d4876d61a4e1d67..609442bfa291453fc5226f8eb5102dbc7598f53c 100644 (file)
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -103,9 +103,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #e7ad52; }
 
-.reveal .controls .slide-number {
-  color: #e7ad52;
-}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #f3d7ac; }
 
@@ -118,6 +115,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #f3d7ac; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #e7ad52;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/serif.css b/css/theme/serif.css
index 859991ce00f9b2f2c2879f217457bf10c1086c5f..16d1ab0ada152f59f51a0b8ad7b69de7186af244 100644 (file)
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -105,9 +105,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #51483d; }
 
-.reveal .controls .slide-number {
-  color: #51483d;
-}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #8b7c69; }
 
@@ -120,6 +117,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #8b7c69; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #51483d;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/simple.css b/css/theme/simple.css
index b74d809d4b3d3c7affba4d5619985083bfbc42f3..c6a129438a9e74b9072f2292ca2f52d2106b8efa 100644 (file)
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -105,9 +105,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: darkblue; }
 
-.reveal .controls .slide-number {
-  color: darkblue;
-}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #0000f1; }
 
@@ -120,6 +117,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #0000f1; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: darkblue;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/sky.css b/css/theme/sky.css
index eee7b083de9cc9cf4a3bf491bf12d21e646271b0..983def23a2231f3e4287421b5895f8ba9450a78e 100644 (file)
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -112,9 +112,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #3b759e; }
 
-.reveal .controls .slide-number {
-  color: #3b759e;
-}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #74a7cb; }
 
@@ -127,6 +124,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #74a7cb; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #3b759e;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 2b11d264b26ff8bbf44a2f3fe37c76536905085b..7bf284569dc0a488b1cb4be39efdd379b29f5f1e 100644 (file)
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -115,9 +115,6 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #268bd2; }
 
-.reveal .controls .slide-number {
-  color: #268bd2;
-}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
@@ -130,6 +127,13 @@ body {
 .reveal .controls div.navigate-down.enabled:hover {
   border-top-color: #78b9e6; }
 
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+  color: #268bd2;
+}
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/

diff --git a/js/reveal.js b/js/reveal.js
index 9718aeffc6f814411a358258aad2b0d9f29d10ed..136dc93386e243323dfe0641edc2932266a5f0a0 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -350,8 +350,10 @@ var Reveal = (function(){
                        '<div class="navigate-left"></div>' +
                        '<div class="navigate-right"></div>' +
                        '<div class="navigate-up"></div>' +
-                       '<div class="navigate-down"></div>' +
-                       '<div class="slide-number"></div>' );
+                       '<div class="navigate-down"></div>' );
+
+               // slide number
+               createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
 
                // State background element [DEPRECATED]
                createSingletonNode( dom.wrapper, 'div', 'state-background', null );
@@ -370,7 +372,7 @@ var Reveal = (function(){
                dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
                dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
 
-               dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' ));
+               dom.slideNumber = document.querySelector( '.slide-number' );
        }
 
        /**
@@ -595,12 +597,6 @@ var Reveal = (function(){
                        dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } );
                        dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
                } );
-
-               if( config.showSlideNumber ) {
-                       ['ready', 'slidechanged'].forEach( function(eventName) { 
-                               document.addEventListener( eventName, onSlideChanged, false ); 
-                       } );
-               }
        }
 
        /**
@@ -636,12 +632,6 @@ var Reveal = (function(){
                        dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } );
                        dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
                } );
-
-               if( config.showSlideNumber ) {
-                       ['ready', 'slidechanged'].forEach( function(eventName) { 
-                               document.removeEventListener( eventName, onSlideChanged, false ); 
-                       } );
-               }
        }
 
        /**
@@ -1548,6 +1538,7 @@ var Reveal = (function(){
                updateControls();
                updateProgress();
                updateBackground();
+               updateSlideNumber();
 
                // Update the URL hash
                writeURL();
@@ -1580,7 +1571,7 @@ var Reveal = (function(){
                updateControls();
                updateProgress();
                updateBackground();
-
+               updateSlideNumber();
        }
 
        /**
@@ -1789,6 +1780,26 @@ var Reveal = (function(){
 
        }
 
+       /**
+        * Updates the slide number div to reflect the current slide.
+        */
+       function updateSlideNumber() {
+
+               // Update slide number if enabled
+               if( config.showSlideNumber && dom.slideNumber)
+               {
+                       var element = dom.slideNumber;
+
+                       // change the number of the page using 'indexh - indexv' format
+                       var indexString = ( indexh + 1 ).toString();
+                       if( indexv > 0 ) {
+                               indexString += ' - ' + indexv.toString();
+                       }
+
+                       element.innerHTML = indexString; 
+               }
+       }
+
        /**
         * Updates the state of all control/navigation arrows.
         */
@@ -2651,23 +2662,6 @@ var Reveal = (function(){
 
        }
 
-       /**
-        * Invoked when slide changed and on the first time slides are ready
-        */
-       function onSlideChanged( event ) {
-               var element = dom.slideNumbers;
-
-               // change the number of the page using 'indexh/indexv' format
-               var indexString = ( event.indexh + 1 ).toString();
-               if( indexv > 0 ) {
-                       indexString += ' / ' + indexv.toString();
-               }
-
-               element.forEach( function( elm ) { 
-                       elm.innerHTML = indexString; 
-               } );
-       }
-
 
        // --------------------------------------------------------------------//
        // ------------------------------- API --------------------------------//