title: Get current slide number when using bookblock.js?
body: <p>Im working on a online book for children, and im using bookblock.js for the flip animations. Also im using popcorn.js to provide audio when im on a current slide and highlight the words when the audio is playing. My problem is (and maybe its a stupid question - but im kinda new in the JavaScript world) that i dont know how to get the current slide so i can autoplay the appropriate audio file. I managed to attach an audio file on each slide and play it when clicking the custom play button and pause it when clicking the custom pause button, but now i also want to autoplay the appropriate audio file when clicking on the next button so the user don't have to press play every time he is on a new slide.</p>
  
  <p>This is the main div where i have two more divs (bb-custom-side) where in one (the right) i have just an image, and in the left bb-custom-side i have 2 buttons (play/pause that are working as they should), i have an image (background) and a text.</p>
  
  <pre><code>&lt;div class="bb-item" id="check3"&gt;
                      &lt;div class="bb-custom-side"&gt;
                          &lt;a class="play" id="play1" onclick="this.firstChild.play()"&gt;&lt;audio class="audio" id="first_page" src="audio/FirstPage.mp3" preload="auto"/&gt;&lt;/a&gt;
                          &lt;a class="pause" id="pause1" onclick="document.getElementById('first_page').pause()"&gt;&lt;/a&gt;
                          &lt;img class="firstL" src="images/2L.png" /&gt;
                          &lt;div class="textCont1" id="t1"&gt;
                                  &lt;span id="w1-1" class="word" data-start="0.40" &gt;Еден&lt;/span&gt;
                                  &lt;span id="w1-2" class="word" data-start="0.90"&gt;облачен&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-3" class="word" data-start="1.40"&gt;ден&lt;/span&gt;
                                  ,
                                  &lt;span id="w1-4" class="word" data-start="2.15"&gt;Петар&lt;/span&gt; 
                                  &lt;span id="w1-5" class="word" data-start="2.55"&gt;и&lt;/span&gt; 
                                  &lt;span id="w1-6" class="word" data-start="2.70"&gt;неговата&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-7" class="word" data-start="7.0"&gt;мајка&lt;/span&gt;
                                  &lt;span id="w1-8" class="word" data-start="8.0"&gt;отидоа&lt;/span&gt;
                                  &lt;span id="w1-9" class="word" data-start="9.0"&gt;во&lt;/span&gt;
                                  &lt;span id="w1-10" class="word" data-start="10.0"&gt;паркот&lt;/span&gt;
                                  .&lt;/br&gt;
                                  &lt;span id="w1-11" class="word" data-start="11.0"&gt;Додека&lt;/span&gt;
                                  &lt;span id="w1-12" class="word" data-start="12.0"&gt;мајка&lt;/span&gt;
                                  &lt;span id="w1-13" class="word" data-start="13.0"&gt;му&lt;/span&gt;
                                  &lt;span id="w1-14" class="word" data-start="14.0"&gt;плетеше&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-15" class="word" data-start="15.0"&gt;џемперче&lt;/span&gt;
                                  ,
                                  &lt;span id="w1-16" class="word" data-start="16.0"&gt;Петар&lt;/span&gt;
                                  &lt;span id="w1-17" class="word" data-start="17.0"&gt;се&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-18" class="word" data-start="18.0"&gt;лулаше&lt;/span&gt;
                                  &lt;span id="w1-19" class="word" data-start="19.0"&gt;на&lt;/span&gt;
                                  &lt;span id="w1-20" class="word" data-start="20.0"&gt;лулашкитe&lt;/span&gt;
                                  .&lt;/br&gt;
                                  &lt;span id="w1-21" class="word" data-start="21.0"&gt;Таа&lt;/span&gt;
                                  &lt;span id="w1-22" class="word" data-start="22.0"&gt;наскоро&lt;/span&gt;
                                  &lt;span id="w1-23" class="word" data-start="23.0"&gt;ќе&lt;/span&gt;
                                  &lt;span id="w1-24" class="word" data-start="24.0"&gt;роди&lt;/span&gt;
                                  &lt;span id="w1-25" class="word" data-start="25.0"&gt;бебе&lt;/span&gt;
                                  ,
                                  &lt;span id="w1-26" class="word" data-start="26.0"&gt;а&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-27" class="word" data-start="27.0"&gt;Петар&lt;/span&gt;
                                  &lt;span id="w1-28" class="word" data-start="28.0"&gt;ќе&lt;/span&gt;
                                  &lt;span id="w1-29" class="word" data-start="29.0"&gt;добие&lt;/span&gt;
                                  &lt;span id="w1-30" class="word" data-start="30.0"&gt;братче&lt;/span&gt;
                                  &lt;span id="w1-31" class="word" data-start="31.0"&gt;или&lt;/span&gt;&lt;/br&gt;
                                  &lt;span id="w1-32" class="word" data-start="32.0"&gt;сестричка&lt;/span&gt;
                                  .&lt;/br&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="bb-custom-side"&gt;
                          &lt;img class="firstR" src="images/2R.png" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Now the script part where i control the next/previous/jump to first/jump to last slide using the bookblock.js plugin is the following :</p>
  
  <pre><code>&lt;script&gt;
  
          var Page = (function() {
  
              var config = {
                      $bookBlock : $( '#bb-bookblock' ),
                      $navNext : $( '#bb-nav-next' ),
                      $navPrev : $( '#bb-nav-prev' ),
                      $navFirst : $( '#bb-nav-first' ),
                      $navLast : $( '#bb-nav-last' ),
                  },
  
                  init = function() {
                      config.$bookBlock.bookblock( {
                          speed : 1000,
                          shadowSides : 0.8,
                          shadowFlip : 0.4
                      } );
                      initEvents();
                  },
                  initEvents = function() {
  
                      var $slides = config.$bookBlock.children();
  
                      // add navigation events
  
                      config.$navNext.on( 'click touchstart', function() {
                          config.$bookBlock.bookblock( 'next' );
                          /////////////////////////////////////////////////////////////////
                          var allaudio = document.getElementsByClassName('audio');
                          for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                          /////////////////////////////////////////////////////////////////
                          return false;
                      } );
  
                      config.$navPrev.on( 'click touchstart', function() {
                          config.$bookBlock.bookblock( 'prev' );
                          /////////////////////////////////////////////////////////////////
                          var allaudio = document.getElementsByClassName('audio');
                          for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                          ////////////////////////////////////////////////////////////////
                          return false;
                      } );
  
                      config.$navFirst.on( 'click touchstart', function() {
                          config.$bookBlock.bookblock( 'first' );
                          /////////////////////////////////////////////////////////////////
                          var allaudio = document.getElementsByClassName('audio');
                          for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                          /////////////////////////////////////////////////////////////////
                          return false;
                      } );
  
                      config.$navLast.on( 'click touchstart', function() {
                          config.$bookBlock.bookblock( 'last' );
                          /////////////////////////////////////////////////////////////////
                          var allaudio = document.getElementsByClassName('audio');
                          for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                          /////////////////////////////////////////////////////////////////
                          return false;
                      } );
  
                      // add swipe events
                      $slides.on( {
                          'swipeleft' : function( event ) {
                              config.$bookBlock.bookblock( 'next' );
                              /////////////////////////////////////////////////////////////////
                              var allaudio = document.getElementsByClassName('audio');
                              for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                              /////////////////////////////////////////////////////////////////
                              return false;
                          },
                          'swiperight' : function( event ) {
                              config.$bookBlock.bookblock( 'prev' );
                              /////////////////////////////////////////////////////////////////
                              var allaudio = document.getElementsByClassName('audio');
                              for( var i=0; i&lt;allaudio.length; i++)
                              {
                                  allaudio[i].pause();
                                  allaudio[i].src = allaudio[i].src;
                              }
                              /////////////////////////////////////////////////////////////////
                              return false;
                          }
                      } );
  
                      // add keyboard events
                      $( document ).keydown( function(e) {
                          var keyCode = e.keyCode || e.which,
                              arrow = {
                                  left : 37,
                                  up : 38,
                                  right : 39,
                                  down : 40
                              };
  
                          switch (keyCode) {
                              case arrow.left:
                                  config.$bookBlock.bookblock( 'prev' );
                                  ////////////////////////////////////////////////////////////////
                                  var allaudio = document.getElementsByClassName('audio');
                                  for( var i=0; i&lt;allaudio.length; i++)
                                  {
                                      allaudio[i].pause();
                                      allaudio[i].src = allaudio[i].src;
                                  }
                                  ////////////////////////////////////////////////////////////////
                                  break;
                              case arrow.right:
                                  config.$bookBlock.bookblock( 'next' );
                                  ////////////////////////////////////////////////////////////////
                                  var allaudio = document.getElementsByClassName('audio');
                                  for( var i=0; i&lt;allaudio.length; i++)
                                  {
                                      allaudio[i].pause();
                                      allaudio[i].src = allaudio[i].src;
                                  }
                                  ////////////////////////////////////////////////////////////////
                                  break;
                          }
                      } );
                  };
  
                  return { init : init };
  
          })();
      &lt;/script&gt;
      &lt;script&gt;
              Page.init();
      &lt;/script&gt;
  </code></pre>
  
  <p>And the part where i manage to sync audio with text on a current slide is the following (the following code is for one slide only in this case the div containing the audio with id="first_page" :</p>
  
  <pre><code>var pop = Popcorn("#first_page");
  
          var wordTimes = {
              "w1-1": { start: 0.55, end: 0.91 },
              "w1-2": { start: 0.90, end: 1.55},
              "w1-3": { start: 1.45, end: 2.25 },
              "w1-4": { start: 2.00, end: 2.65 },
              "w1-5": { start: 2.6, end: 2.80 },
              "w1-6": { start: 2.72, end: 3.3 },
              "w1-7": { start: 3.30, end: 3.77 },
              "w1-8": { start: 3.77, end: 4.1 },
              "w1-9": { start: 4.10, end: 4.24 },
              "w1-10": { start: 4.24, end: 5.00 },
              "w1-11": { start: 5.40, end: 6.06 },
              "w1-12": { start: 6.06, end: 6.55 },
              "w1-13": { start: 6.1, end: 6.56 },
              "w1-14": { start: 6.56, end: 6.97 },
              "w1-15": { start: 6.95, end: 7.75 },
              "w1-16": { start: 8, end: 8.43 },
              "w1-17": { start: 8.40, end: 8.66 },
              "w1-18": { start: 8.60, end: 9.10 },
              "w1-19": { start: 9.00, end: 9.24},
              "w1-20": { start: 9.20, end: 10.11 },
              "w1-21": { start: 10.92, end: 11.25 },
              "w1-22": { start: 11.20, end: 11.70 },
              "w1-23": { start: 11.60, end: 11.80 },
              "w1-24": { start: 11.78, end: 12.15 },
              "w1-25": { start: 12.11, end: 12.50 },
              "w1-26": { start: 12.90, end: 13.20 },
              "w1-27": { start: 13.15, end: 13.65 },
              "w1-28": { start: 13.55, end: 13.75 },
              "w1-29": { start: 13.70, end: 14.10 },
              "w1-30": { start: 14.20, end: 14.65 },
              "w1-31": { start: 14.57, end: 14.85 },
              "w1-32": { start: 14.70, end: 15.50 }
          };
  
          $.each(wordTimes, function(id, time) {
              pop.footnote({
                  start: time.start,
                  end: time.end,
                  text: '',
                  target: id,
                  effect: "applyclass",
                  applyclass: "selected"
              });
          });
  
          pop.play();
  
          $('.word').click(function() {
              var audio = $('#first_page');
              audio[0].currentTime = parseFloat($(this).data('start'), 10);
              audio[0].play();
          });
  </code></pre>
  
  <p>So i dont know if i provided enough info about the code but in short what i really want to know: is there a way for me to get the current slide from the bookblock.js (cause there is a CURRENT variable inside the plugin but i dont know how to get it and check it's status) or anywhere else so i can write an if statement and autoplay the right audio...
  I tried to declare a variable COUNTER that increments upon config.$bookBlock.bookblock('next') and decrement upon config.$bookBlock.bookblock('prev') and check its status for example for slide 2:</p>
  
  <pre><code>    if( counter == 2 ) {
  // use the popcorn script code with the appropriate audio }
  </code></pre>
  
  <p>but that for some reason won't work...</p>
  
  <p>I also tried solutions for similar problems that were disscussed on StackOverflow like:
  <a href="https://stackoverflow.com/questions/1343237/how-to-check-elements-visibility-via-javascript">How to check element&#39;s visibility via javascript?</a>
  <a href="https://stackoverflow.com/questions/19253648/get-display-status-element-effected-by-slidetoggle">Get display status element effected by .slideToggle()?</a>
  <a href="https://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen">Check if element is visible on screen</a>
  <a href="http://opensource.teamdf.com/visible/examples/demo-basic.html" rel="nofollow noreferrer">http://opensource.teamdf.com/visible/examples/demo-basic.html</a></p>
  
  <p>so i can check when the div is in the Viewport to play the audio but for some reason that wont work either...</p>
  
  <p>Any help will be greatly appreciated.</p>