update demo page

css/hopscotch.less

@@ -52,6 +52,7 @@ div#hopscotch-bubble {
   }
 
   h3 {
+    font-family: @bubbleFontFamily;
     font-weight: bold;
     margin: 0 @bubblePadding 0 0;
     padding: 0;
@@ -63,6 +64,7 @@ div#hopscotch-bubble {
     -webkit-font-smoothing: antialiased; /* to fix text flickering */
 
     p {
+      font-family: @bubbleFontFamily;
       line-height: 17px;
       margin: 10px 0;
       padding: 0;

index.html

@@ -19,13 +19,19 @@
         background-color: #fff;
         border: 5px solid #000;
         padding: 20px;
-        position: absolute;
+        position: fixed;
         top: 0;
         right: 0;
+        z-index: 10;
       }
       #debug h3 {
         margin: 10px 0;
       }
+      #debug-output,
+      #debug-output p {
+        margin: 0;
+        padding: 0;
+      }
       .img-container {
         text-align: center;
       }
@@ -81,21 +87,46 @@ <h3>Tour Options</h3>
       </label>
       <br/>
       <label>Go to step number: <input id="gototext" type="text" size="5"><input id="gotobtn" type="button" value="Go!"></label>
+      <div id="debug-output">
+      </div>
     </div>
     <!--
     <script src="js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
     <script src="js/yui/build/animation/animation-min.js"></script>
-    <script src="js/jquery-1.7.2.js"></script>
     <script src="bootstrap/js/bootstrap-tooltip.js""></script>
     <script src="bootstrap/js/bootstrap-popover.js""></script>
     -->
+    <script src="js/jquery-1.7.2.js"></script>
+    <!--<script src="js/hopscotch_jquery.js"></script>-->
     <script src="js/hopscotch.js"></script>
     <script src="js/exampletour.js"></script>
     <script src="js/debug.js"></script>
     <script>
-      hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
-      hopscotch.startTour();
+      var printLog = function(str) {
+        var el = document.getElementById('debug-output'),
+            newEl = document.createElement('p');
+        newEl.innerHTML = str;
+        el.appendChild(newEl);
+      },
+      onStart = function(tourId) {
+        printLog('global start ' + tourId);
+      },
+      onEnd = function(tourId) {
+        printLog('global end ' + tourId);
+      },
+      onNext = function(tourId, stepNum) {
+        printLog('global next ' + tourId + ' ' + stepNum);
+      },
+      onPrev = function(tourId, stepNum) {
+        printLog('global prev ' + tourId + ' ' + stepNum);
+      };
+      hopscotch.addCallback('start', onStart)
+               .addCallback('end', onEnd)
+               .addCallback('next', onNext)
+               .addCallback('prev', onPrev);
+
+      hopscotch.startTour(tour);
     </script>
   </body>
 </html>

js/debug.js

@@ -67,8 +67,8 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   }
 }());
 
-// GO TO STEP NUM
 (function() {
+  // GO TO STEP NUM
   var gotobtn  = document.getElementById('gotobtn');
   addClickListener(gotobtn, function() {
     var gototext = document.getElementById('gototext');
@@ -79,8 +79,7 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
   // START TOUR
   // ==========
   addClickListener(document.getElementById('startBtn'), function() {
-    hopscotch.loadTour(tour);
-    hopscotch.startTour();
+    hopscotch.startTour(tour);
   });
 
   // ========

js/exampletour.js

@@ -7,17 +7,10 @@ var tour = {
       target: 'subheading',
       orientation: 'bottom',
       arrowOffset: 30,
+      nextOnTargetClick: true,
       onNext: function() {
         document.getElementById('pageTitle').style.color = '#f00';
-      },
-    },
-    {
-      title: 'Mission district',
-      content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!',
-      target: 'mission',
-      orientation: 'top',
-      xOffset: 100,
-      arrowOffset: 100
+      }
     },
     {
       title: 'Debug controls',
@@ -28,19 +21,29 @@ var tour = {
       height: 480,
       showSkip: true,
       fixedElement: true,
-      xOffset: 20,
+      //xOffset: 20,
       zindex: 15,
-      delay: 1000,
+      showPrevButton: true,
+      showNextButton: true,
+      delay: 5000,
       onPrev: function() {
         document.getElementById('pageTitle').style.color = '#000';
       }
     },
+    {
+      title: 'Mission district',
+      content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!',
+      target: 'mission',
+      orientation: 'top',
+      xOffset: 100,
+      arrowOffset: 100
+    },
     {
       title: 'Cool wave',
       content: 'This is a <b>colorful</b> wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.',
       target: 'wave',
       orientation: 'bottom',
-      width: 500,
+      width: 500
       //xOffset: -50,
       //arrowOffset: 400,
       //showPrevButton: false
@@ -77,14 +80,12 @@ var tour = {
       xOffset: 200
     }
   ],
-  animate: false,
+  //animate: true,
   //smoothScroll: false,
   //showCloseButton: false,
-  //scrollTopMargin: 200,
-  showPrevButton: true,
-  showNextButton: true,
+  scrollTopMargin: 50,
   arrowWidth: 20,
-  scrollDuration: 500,
+  //scrollDuration: 2000,
   cookieName: 'li_hs',
   skipIfNoElement: true,
   onNext: function(tourId, idx) {
@@ -98,16 +99,18 @@ var tour = {
     }
   },
   onPrev: function(tourId, idx) {
-    console.log('tour prev ' + tourId + ' ' + idx);
+    printLog('tour prev ' + tourId + ' ' + idx);
   },
-  onStart: function(tourId) {
-    console.log('tour start ' + tourId);
+  onStart: function(tourId, idx) {
+    printLog('tour start ' + tourId + ' and idx is: ' + idx);
   },
   onEnd: function(tourId) {
-    console.log('tour end ' + tourId);
+    printLog('tour end ' + tourId);
+  },
+  onShow: function(tourId, idx) {
+    printLog('showing step: ' + tourId + ' ' + idx);
   },
   onError: function(tourId, idx) {
-    //alert('DANGER!!! tourId: ' + tourId + ' and idx: ' + idx);
     var newLi,
         list = document.getElementById('my-list');
     if (list) {
@@ -118,7 +121,7 @@ var tour = {
     }
   },
   onClose: function() {
-    console.log('closing');
+    printLog('closing');
   }
   //i18n: {
     ////nextBtn: 'Forward',

secondpage.html

@@ -16,9 +16,10 @@ <h1>Second Test Page</h1>
     <script src="js/exampletour.js"></script>
     <script src="js/hopscotch.js"></script>
     <script>
-      hopscotch.loadTour(tour);
       //hopscotch.clearCookie();
-      hopscotch.startTour();
+      var printLog = function() {
+      };
+      hopscotch.startTour(tour);
     </script>
   </body>
 </html>