Merge pull request #2 from DrkCloudStrife/master

This is more stable.
datapimp · Sep 26, 2011 · a414dc8 · a414dc8
2 parents 7719f37 + 06ec0d4
commit a414dc8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -11,25 +11,25 @@
         <div id="scenes-container">
           <div id="scenes-wrapper">
             <div class="scene" id="scene-one">
-              <div class="point" id="point-one">point One</div>
+              <div class="point" id="point-one" data-icon="icon-1">point One</div>
               <div class="point" id="point-two">point Two</div>
               <div class="point" id="point-three">point Three</div>
               <div class="point" id="point-four" data-icon="icon-1">point Four</div>
             </div>
             <div class="scene" id="scene-two">
-              <div class="point" id="point-five">point Five</div>
+              <div class="point" id="point-five" data-icon="icon-2">point Five</div>
               <div class="point" id="point-six">point Six</div>
               <div class="point" id="point-seven">point Seven</div>
-              <div class="point" id="point-eight">point Eight</div>
+              <div class="point" id="point-eight" data-icon="icon-2">point Eight</div>
             </div>
             <div class="scene" id="scene-three">
-              <div class="point" id="point-nine">point Nine</div>
+              <div class="point" id="point-nine" data-icon="icon-3">point Nine</div>
               <div class="point" id="point-ten">point Ten</div>
               <div class="point" id="point-eleven">point Eleven</div>
               <div class="point" id="point-twelve">point Twelve</div>
             </div>
             <div class="scene" id="scene-four">
-              <div class="point" id="point-thirteen">point 13</div>
+              <div class="point" id="point-thirteen" data-icon="icon-3">point 13</div>
               <div class="point" id="point-fourteen">point 14</div>
               <div class="point" id="point-fifteen">point 15</div>
               <div class="point" id="point-sixteen">point 16</div>

diff --git a/javascripts/jquery-scrolling-tour.js b/javascripts/jquery-scrolling-tour.js
@@ -132,12 +132,16 @@
           point_el = $('#' + point.name ),
 			    bgcolor = point.background,
 			    color = point.color,
-          point_text = point.text || point_el.data('text');
+          html_text = point.html_text || false,
+          point_text = point.text || point_el.data('text'),
+          out_html = '<p>' + point_text + '</p><span class="tooltip_arrow"></span>';
+      if (html_text != false)
+        out_html = html_text + '<span class="tooltip_arrow"></span>'
 
 			var $tooltip = $('<div>', {
 				id: options.tooltip_id,
 				class: options.tooltip_class,
-				html: '<p>' + point_text + '</p><span class="tooltip_arrow"></span>'
+				html: out_html
 			}).css({
 				'display': 'none',
 				'background-color': bgcolor,
@@ -256,15 +260,13 @@
 			var b_b = parseFloat(properties.top, 10) + $tooltip.height();
 			if ((e_t + e_h) > b_b) b_b = e_t + e_h;
 
-      console.log("Showing TOoltip", properties, $tooltip)
 
 			$tooltip.css(properties).show();
 		}
 
 		var removePoint = function() {
 			var tooltip = $('#' + options.tooltip_id);
 
-      console.log("Removign TOoltip", tooltip );
       tooltip.remove();
 		}
 
@@ -304,23 +306,9 @@
         if (by == -1 && currentIndex == 0)
           currentIndex = options.loop ? maxIndex : 1;
         else if (by == 1 && currentIndex == (maxIndex - 1))
-          currentIndex = options.loop ? -1 : maxIndex;
-        console.log("Setting currentIndex: ",currentIndex)
+          currentIndex = options.loop ? -1 : maxIndex - 2;
         newPoint = script[currentIndex + by]
 
-        // Removed by: Eduardo Garibay -- is not working.
-        //if (typeof(newPoint) === "undefined") {
-        //	if (currentIndex === 0) {
-        //		newPoint = script[0];
-        //	} else {
-        //		if (options.loop) {
-        //			newPoint = script[0];
-        //		} else {
-        //			return false;
-        //		}
-        //	}
-        //}
-
 				var sceneChanges = newPoint.sceneContainer !== currentPoint.sceneContainer;
 
 				// cancel execution if there is a scene change and the
@@ -339,18 +327,26 @@
 					options.onPointChange.apply(context, [currentPoint, newPoint]);
 				}
 
-        showPoint( newPoint );
+        //console.log("Changing Scene? ", sceneChanges)
+        if (sceneChanges == true)
+          setTimeout(function(){ showPoint( newPoint ); }, 500);
+        else
+          showPoint( newPoint );
+
 				return newPoint;
 
 			}
 		};
 
 		var nextPoint = changePoint(1),
-		previousPoint = changePoint(-1);
+		previousPoint = changePoint(-1),
+    init = changePoint(0);
 
 		$(options.nextSelector, controller).click(nextPoint)
 		$(options.previousSelector, controller).click(previousPoint)
 
+    // start with the first point of interest
+    init();
 	};
 
 })(jQuery);

diff --git a/javascripts/tour.js b/javascripts/tour.js
@@ -3,30 +3,35 @@ $(function(){
     container: 'scene-one',
     points: [{
       name: 'point-one',
-      position: 'BL',
+      position: 'TL',
       background: 'black',
-      color: 'white'
+      color: 'white',
+      html_text: "\
+        <h2>HTML Sample tip</h2>\
+        <p>I'm a tooltip message</p>\
+        <p>This is new</p>"
     },{
       name: 'point-two',
       position: 'TL',
       background: 'black',
-      color: 'white'
+      color: 'white',
+      text: "simple text-based tip"
     },{
       name: 'point-three',
-      position: 'TL',
+      position: 'BL',
       background: 'black',
       color: 'white'
     },{
       name: 'point-four',
-      position: 'TL',
+      position: 'BL',
       background: 'black',
       color: 'white'
     }]
   },{
     container: 'scene-two',
     points:[{
       name: 'point-five',
-      position: '',
+      position: 'TL',
       background: 'black',
       color: 'white'
     },{
@@ -99,8 +104,9 @@ $(function(){
       var point_el = $('#' + currentPoint.name ),
           icon = point_el.data('icon'),
           icon_el = $('#' + icon );
-      
+
       if( icon_el.length >= 1){
+        $(".icon").css({"background-color":""});
         icon_el.css({"background-color":"red"});
       }
     }