change the way top-oriented bubbles are rendered

Author: Gordon Koo

index.html

@@ -51,7 +51,7 @@ <h2 id="subheading" class="one two three">Content</h2>
         <img id="wave" src="http://i.imgur.com/s632o.jpg">
       </div>
       <div class="img-container">
-        <img id="python" src="http://i.imgur.com/mIgyw.jpg">
+        <img id="google" src="https://www.google.com/images/srpr/logo3w.png">
       </div>
       <div class="img-container">
         <img class="mission" src="http://cdn.theatlanticcities.com/img/upload/2012/07/19/20120719-mission1/largest.jpg">

js/debug.js

@@ -98,8 +98,8 @@ for (i = 0, len = booleanControls.length; i < len; i++) {
       id: 'mycallout',
       title: 'Title',
       content: 'Content',
-      target: 'python',
-      orientation: 'left',
+      target: 'google',
+      orientation: 'top',
       showNavButtons: false,
       showNumber: false
     });
@@ -138,7 +138,7 @@ var tour2 = {
     {
       title: 'Python decorator',
       content: 'Whoa, did you notice that the page just scrolled? If you didn\'t, you aren\'t very observant. (Or you have a very tall monitor)',
-      targetId: 'python',
+      targetId: 'google',
       orientation: 'top',
       xOffset: 200
     }

js/exampletour.js

@@ -74,7 +74,7 @@ var tour = {
     {
       title: 'Python decorator',
       content: 'Whoa, did you notice that the page just scrolled? If you didn\'t, you aren\'t very observant. (Or you have a very tall monitor)',
-      target: 'python',
+      target: 'google',
       orientation: 'top',
       xOffset: 200
     }

js/hopscotch-0.0.4.js

@@ -526,12 +526,7 @@
             self.destroy();
           }
 
-          if (evt.preventDefault) {
-            evt.preventDefault();
-          }
-          else if (event) {
-            event.returnValue = false;
-          }
+          utils.evtPreventDefault(evt);
         };
       }
       return this.closeFn;
@@ -607,7 +602,7 @@
      * @param {Function} callback Function to be invoked after rendering is finished.
      */
     render: function(step, idx, isLast, callback) {
-      var self = this,
+      var el = this.element,
           showNext,
           showPrev,
           bubbleWidth,
@@ -652,20 +647,25 @@
       this.containerEl.style.width = bubbleWidth + 'px';
       this.containerEl.style.padding = bubblePadding + 'px';
 
-      this.element.style.zIndex = (step.zindex ? step.zindex : '');
+      el.style.zIndex = (step.zindex ? step.zindex : '');
 
       if (step.orientation === 'top') {
-        // Timeout to get correct height of bubble for positioning.
-        setTimeout(function() {
-          self.setPosition(step);
-          // only want to adjust window scroll for non-fixed elements
-          if (callback && !step.fixedElement) {
-            callback();
-          }
-          else {
-            self.show();
-          }
-        }, 5);
+        // For bubbles placed on top of elements, we need to get the
+        // bubble height to correctly calculate the bubble position.
+        // Show it briefly offscreen to calculate height, then hide
+        // it again.
+        el.style.top = '-9999px';
+        el.style.left = '-9999px';
+        utils.removeClass(el, 'hide');
+        this.setPosition(step);
+        utils.addClass(el, 'hide');
+        // only want to adjust window scroll for non-fixed elements
+        if (callback && !step.fixedElement) {
+          callback();
+        }
+        else {
+          this.show();
+        }
       }
       else {
         // Don't care about height for the other orientations.