Some fixes

1) Step number line-height 2) IE7 doesn't like bracket notation for characters. Use charAt. 3) Check for CSS transition support on document ready
LinkedInAttic · Apr 9, 2013 · f2581a6 · f2581a6
1 parent f346215
commit f2581a6
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 45 deletions.
diff --git a/css/hopscotch.css b/css/hopscotch.css
diff --git a/js/hopscotch-0.0.5.js b/js/hopscotch-0.0.5.js
@@ -8,6 +8,7 @@
       callbacks,
       helpers,
       winLoadHandler,
+      hasCssTransitions,
       winHopscotch      = context[namespace],
       undefinedStr      = 'undefined',
       waitingToStart    = false, // is a tour waiting for the document to finish
@@ -27,13 +28,7 @@
       },
       hasJquery         = (typeof window.jQuery !== undefinedStr),
       hasSessionStorage = (typeof window.sessionStorage !== undefinedStr),
-      document          = window.document,
-      docStyle          = document.head.style,
-      hasCssTransitions = (typeof docStyle.MozTransition    !== undefinedStr ||
-                           typeof docStyle.MsTransition     !== undefinedStr ||
-                           typeof docStyle.webkitTransition !== undefinedStr ||
-                           typeof docStyle.OTransition      !== undefinedStr ||
-                           typeof docStyle.transition       !== undefinedStr);
+      document          = window.document;
 
   if (winHopscotch) {
     // Hopscotch already exists.
@@ -154,6 +149,15 @@
       return typeof val !== undefinedStr ? val : valDefault;
     },
 
+    supportsCssTransitions: function() {
+      var docStyle = document.body.style;
+      return (typeof docStyle.MozTransition    !== undefinedStr ||
+              typeof docStyle.MsTransition     !== undefinedStr ||
+              typeof docStyle.webkitTransition !== undefinedStr ||
+              typeof docStyle.OTransition      !== undefinedStr ||
+              typeof docStyle.transition       !== undefinedStr);
+    },
+
     /**
      * Invokes a single callback represented by an array.
      * Example input: ["my_fn", "arg1", 2, "arg3"]
@@ -1073,15 +1077,17 @@
       /**
        * Append to body once the DOM is ready.
        */
-      if (document.readyState === 'complete') {
+      if (document.readyState === 'complete' || document.readyState === 'interactive') {
         document.body.appendChild(el);
+        hasCssTransitions = utils.supportsCssTransitions();
       }
       else {
         // Moz, webkit, Opera
         if (document.addEventListener) {
           appendToBody = function() {
             document.removeEventListener('DOMContentLoaded', appendToBody);
             document.body.appendChild(el);
+            hasCssTransitions = utils.supportsCssTransitions();
           };
 
           document.addEventListener('DOMContentLoaded', appendToBody);
@@ -1093,6 +1099,7 @@
               document.detachEvent('onreadystatechange', appendToBody);
               document.body.appendChild(el);
             }
+            hasCssTransitions = utils.supportsCssTransitions();
           };
 
           document.attachEvent('onreadystatechange', appendToBody);
@@ -1686,7 +1693,6 @@
 
         showBubble = function() {
           bubble.show();
-          // tour-wide callback
           utils.invokeEventCallbacks('show', step.onShow);
         };
 
@@ -1956,7 +1962,7 @@
       for (i = 0, len = events.length; i < len; ++i) {
         // At this point, options[eventPropName] may have changed from an array
         // to a function.
-        eventPropName = 'on' + events[i][0].toUpperCase() + events[i].substring(1);
+        eventPropName = 'on' + events[i].charAt(0).toUpperCase() + events[i].substring(1);
         if (options[eventPropName]) {
           this.listen(events[i],
                       options[eventPropName],