Updated Debug file to avoid flickering of trigger hook

This was the cause for this issue: #23
janpaepke · Mar 24, 2014 · 4961c32 · 4961c32
1 parent 44d720a
commit 4961c32
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 101 deletions.
diff --git a/ScrollMagic.jquery.json b/ScrollMagic.jquery.json
@@ -1,6 +1,6 @@
 {
     "name": "ScrollMagic",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "title": "ScrollMagic",
     "author": {
         "name": "Jan Paepke",

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "ScrollMagic",
   "description": "The jQuery plugin for magical scroll interactions.",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "homepage": "http://janpaepke.github.io/ScrollMagic/",
   "author": {
     "name": "Jan Paepke",

diff --git a/docs/index.html b/docs/index.html
@@ -166,7 +166,7 @@ <h2>Usage</h2><pre><code class="lang-javascript">// init controller
 </code></pre>
 <p>Check out the <a href="http://janpaepke.github.com/ScrollMagic/examples/index.html">examples</a> or the <a href="http://janpaepke.github.com/ScrollMagic/docs/index.html">documentation</a> for full reference.</p>
 <h2>Browser Support</h2><p>ScrollMagic aims to support all major browsers in recent versions:<br>Firefox 26+, Chrome 30+, Safari 6+, Opera 19+, IE 9+</p>
-<h2>About the Author</h2><p>I am a freelance Art Director based in Vienna, Austria (soon Lausanne, Switzerland).<br>I started this project to intensify my knowledge of javascript.</p>
+<h2>About the Author</h2><p>I am a freelance Art Director based in Lausanne, Switzerland.<br>I started this project to intensify my knowledge of javascript.</p>
 <p><a href="http://www.janpaepke.de">Check out my website</a> or <a href="http://twitter.com/janpaepke">Follow me on Twitter</a></p>
 <h2>License</h2><p>ScrollMagic is dual licensed under the MIT license and GPL.<br>For more information click <a href="https://github.com/janpaepke/ScrollMagic/blob/master/LICENSE.md">here</a>.<br>Click <a href="http://www.greensock.com/licensing/">here</a> to get more information on greensock licensing.</p></article>
     </section>
@@ -214,7 +214,7 @@ <h2>
 
 
     <dt class="tag-version">Version:</dt>
-    <dd class="tag-version"><ul class="dummy"><li>1.0.4</li></ul></dd>
+    <dd class="tag-version"><ul class="dummy"><li>1.0.5</li></ul></dd>
 
 
 

diff --git a/docs/jquery.scrollmagic.debug.js.html b/docs/jquery.scrollmagic.debug.js.html
@@ -101,7 +101,7 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
 	by Jan Paepke 2014 (@janpaepke)
 	http://janpaepke.github.io/ScrollMagic
 
-	@version	1.0.4
+	@version	1.0.5
 	@license	Dual licensed under MIT license and GPL.
 	@author		Jan Paepke - e-mail@janpaepke.de
 */
@@ -232,28 +232,19 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
 				parentOffset = cParams.container.offset() || {top: 0, left: 0},
 				parentPos = cParams.vertical ? parentOffset.top : parentOffset.left,
 				hookPos = (cParams.size * scene.triggerHook()) + parentPos,
-				direction = cParams.vertical ? "v" : "h",
-				resetCSS = { // reset (in case scene is removed from a horizontal scene and added to a vertical one)
-					"border": "none",
-					top: "auto",
-					bottom: "auto",
-					left: "auto",
-					right: "auto"
-				};
-				if (!cParams.isDocument) {
-					hookPos -=  cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
-				}
+				direction = cParams.vertical ? "v" : "h";
 
 			if (cParams.isDocument) { // account for possible body positioning
 				var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset;
 				indicators.css({
 					top: -bodyOffset.top,
 					left: -bodyOffset.left
 				})
+			} else {
+				hookPos -=  cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
 			}
 
 			$triggerHook
-				.css(resetCSS)
 				.attr("data-hook", hookPos)
 				.attr("data-direction", direction)
 				.data("parent", cParams.container);
@@ -263,47 +254,50 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
 				$triggerHook.hide();
 			} else {
 				$triggerHook.show();
+				var flip = hookPos > cParams.size*0.8; // put name above line?	
 				if (cParams.vertical) {
 					// triggerHook
 					$triggerHook.css({
-						"border-top": "1px solid blue",
-						padding: "0 8px 2px 8px",
+						top: flip ? hookPos - $triggerHook.height() - 2 : hookPos,
+						left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent,
 						width: 40,
-						top: hookPos,
-						left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent
+						height: "auto",
+						padding: "0 8px 2px 8px",
+						"border-top": flip ? "none" : "1px solid blue",
+						"border-bottom": flip ? "1px solid blue" : "none",
+						"border-left": "none",
+						"border-right": "none"
 					});
-					// correct if too far down
-					if (hookPos > cParams.size*0.8) {
-						$triggerHook
-							.css("border-bottom", "1px solid blue")
-							.css("top", hookPos - $triggerHook.outerHeight(true))
-							.css("border-top", "none");
-					}
 				} else {
 					$triggerHook.css({
-						"border-left": "1px solid blue",
+						top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
+						left: flip ? hookPos - $triggerHook.width() - 9: hookPos,
+						width: "auto",
 						height: 20,
 						padding: "5px 5px 0 5px",
-						top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
-						left: hookPos,
+						"border-top": "none",
+						"border-bottom": "none",
+						"border-left": flip ? "none" : "1px solid blue",
+						"border-right": flip ? "1px solid blue" : "none"
 					});
-					// correct if too far right
-					if (hookPos > cParams.size*0.8) {
-						$triggerHook
-							.css("border-right", "1px solid blue")
-							.css("left", hookPos - $triggerHook.width() - parseFloat($triggerHook.css("padding-left")))
-							.css("border-left", "none");
-					}
 				}
 			}
 
 			if (!triggerOnly) {
 				var
 					startPos = scene.startPosition(),
-					endPos = startPos + scene.duration();
+					endPos = startPos + scene.duration(),
+					resetCSS = {
+						"border": "none",
+						top: "auto",
+						bottom: "auto",
+						left: "auto",
+						right: "auto"
+					};
 
 				$start.css(resetCSS);
 				$end.css(resetCSS);
+
 				if (scene.duration() == 0) {
 					$end.hide();
 				} else {
@@ -312,32 +306,32 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
 				if (cParams.vertical) {
 					// start
 					$start.css({
-						"border-top": "1px solid green",
+						top: startPos,
 						right: 71-cParams.container.scrollLeft() + options.indent,
-						padding: "0 8px 0 8px",
-						top: startPos
+						"border-top": "1px solid green",
+						padding: "0 8px 0 8px"
 					});
 					// end
 					$end.css({
-						"border-top": "1px solid red",
+						top: endPos,
 						right: 71-cParams.container.scrollLeft() + options.indent,
-						padding: "0 8px 0 8px",
-						top: endPos
+						"border-top": "1px solid red",
+						padding: "0 8px 0 8px"
 					});
 				} else {
 					// start
 					$start.css({
-						"border-left": "1px solid green",
+						left: startPos,
 						bottom: 40-cParams.container.scrollTop() + options.indent,
-						padding: "0 8px 0 8px",
-						left: startPos
+						"border-left": "1px solid green",
+						padding: "0 8px 0 8px"
 					});
 					// end
 					$end.css({
-						"border-left": "1px solid red",
+						left: endPos,
 						bottom: 40-cParams.container.scrollTop() + options.indent,
-						padding: "0 8px 0 8px",
-						left: endPos
+						"border-left": "1px solid red",
+						padding: "0 8px 0 8px"
 					});
 				}
 			}

diff --git a/docs/jquery.scrollmagic.js.html b/docs/jquery.scrollmagic.js.html
@@ -109,7 +109,7 @@ <h1 class="page-title">Source: jquery.scrollmagic.js</h1>
 */
 /**
 @overview	##Info
-@version	1.0.4
+@version	1.0.5
 @license	Dual licensed under MIT license and GPL.
 @author		Jan Paepke - e-mail@janpaepke.de
 

diff --git a/js/jquery.scrollmagic.debug.js b/js/jquery.scrollmagic.debug.js
@@ -4,7 +4,7 @@
 	by Jan Paepke 2014 (@janpaepke)
 	http://janpaepke.github.io/ScrollMagic
 
-	@version	1.0.4
+	@version	1.0.5
 	@license	Dual licensed under MIT license and GPL.
 	@author		Jan Paepke - e-mail@janpaepke.de
 */
@@ -135,28 +135,19 @@
 				parentOffset = cParams.container.offset() || {top: 0, left: 0},
 				parentPos = cParams.vertical ? parentOffset.top : parentOffset.left,
 				hookPos = (cParams.size * scene.triggerHook()) + parentPos,
-				direction = cParams.vertical ? "v" : "h",
-				resetCSS = { // reset (in case scene is removed from a horizontal scene and added to a vertical one)
-					"border": "none",
-					top: "auto",
-					bottom: "auto",
-					left: "auto",
-					right: "auto"
-				};
-				if (!cParams.isDocument) {
-					hookPos -=  cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
-				}
+				direction = cParams.vertical ? "v" : "h";
 
 			if (cParams.isDocument) { // account for possible body positioning
 				var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset;
 				indicators.css({
 					top: -bodyOffset.top,
 					left: -bodyOffset.left
 				})
+			} else {
+				hookPos -=  cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
 			}
 
 			$triggerHook
-				.css(resetCSS)
 				.attr("data-hook", hookPos)
 				.attr("data-direction", direction)
 				.data("parent", cParams.container);
@@ -166,47 +157,50 @@
 				$triggerHook.hide();
 			} else {
 				$triggerHook.show();
+				var flip = hookPos > cParams.size*0.8; // put name above line?	
 				if (cParams.vertical) {
 					// triggerHook
 					$triggerHook.css({
-						"border-top": "1px solid blue",
-						padding: "0 8px 2px 8px",
+						top: flip ? hookPos - $triggerHook.height() - 2 : hookPos,
+						left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent,
 						width: 40,
-						top: hookPos,
-						left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent
+						height: "auto",
+						padding: "0 8px 2px 8px",
+						"border-top": flip ? "none" : "1px solid blue",
+						"border-bottom": flip ? "1px solid blue" : "none",
+						"border-left": "none",
+						"border-right": "none"
 					});
-					// correct if too far down
-					if (hookPos > cParams.size*0.8) {
-						$triggerHook
-							.css("border-bottom", "1px solid blue")
-							.css("top", hookPos - $triggerHook.outerHeight(true))
-							.css("border-top", "none");
-					}
 				} else {
 					$triggerHook.css({
-						"border-left": "1px solid blue",
+						top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
+						left: flip ? hookPos - $triggerHook.width() - 9: hookPos,
+						width: "auto",
 						height: 20,
 						padding: "5px 5px 0 5px",
-						top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
-						left: hookPos,
+						"border-top": "none",
+						"border-bottom": "none",
+						"border-left": flip ? "none" : "1px solid blue",
+						"border-right": flip ? "1px solid blue" : "none"
 					});
-					// correct if too far right
-					if (hookPos > cParams.size*0.8) {
-						$triggerHook
-							.css("border-right", "1px solid blue")
-							.css("left", hookPos - $triggerHook.width() - parseFloat($triggerHook.css("padding-left")))
-							.css("border-left", "none");
-					}
 				}
 			}
 
 			if (!triggerOnly) {
 				var
 					startPos = scene.startPosition(),
-					endPos = startPos + scene.duration();
+					endPos = startPos + scene.duration(),
+					resetCSS = {
+						"border": "none",
+						top: "auto",
+						bottom: "auto",
+						left: "auto",
+						right: "auto"
+					};
 
 				$start.css(resetCSS);
 				$end.css(resetCSS);
+
 				if (scene.duration() == 0) {
 					$end.hide();
 				} else {
@@ -215,32 +209,32 @@
 				if (cParams.vertical) {
 					// start
 					$start.css({
-						"border-top": "1px solid green",
+						top: startPos,
 						right: 71-cParams.container.scrollLeft() + options.indent,
-						padding: "0 8px 0 8px",
-						top: startPos
+						"border-top": "1px solid green",
+						padding: "0 8px 0 8px"
 					});
 					// end
 					$end.css({
-						"border-top": "1px solid red",
+						top: endPos,
 						right: 71-cParams.container.scrollLeft() + options.indent,
-						padding: "0 8px 0 8px",
-						top: endPos
+						"border-top": "1px solid red",
+						padding: "0 8px 0 8px"
 					});
 				} else {
 					// start
 					$start.css({
-						"border-left": "1px solid green",
+						left: startPos,
 						bottom: 40-cParams.container.scrollTop() + options.indent,
-						padding: "0 8px 0 8px",
-						left: startPos
+						"border-left": "1px solid green",
+						padding: "0 8px 0 8px"
 					});
 					// end
 					$end.css({
-						"border-left": "1px solid red",
+						left: endPos,
 						bottom: 40-cParams.container.scrollTop() + options.indent,
-						padding: "0 8px 0 8px",
-						left: endPos
+						"border-left": "1px solid red",
+						padding: "0 8px 0 8px"
 					});
 				}
 			}

diff --git a/js/jquery.scrollmagic.js b/js/jquery.scrollmagic.js
@@ -12,7 +12,7 @@ Greensock License info at http://www.greensock.com/licensing/
 */
 /**
 @overview	##Info
-@version	1.0.4
+@version	1.0.5
 @license	Dual licensed under MIT license and GPL.
 @author		Jan Paepke - e-mail@janpaepke.de