Skip to content

Commit 4961c32

Browse files
janpaepkejanpaepke
committed
Updated Debug file to avoid flickering of trigger hook
This was the cause for this issue: #23
1 parent 44d720a commit 4961c32

8 files changed

+89
-101
lines changed

‎ScrollMagic.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ScrollMagic",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"title": "ScrollMagic",
55
"author": {
66
"name": "Jan Paepke",

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ScrollMagic",
33
"description": "The jQuery plugin for magical scroll interactions.",
4-
"version": "1.0.4",
4+
"version": "1.0.5",
55
"homepage": "http://janpaepke.github.io/ScrollMagic/",
66
"author": {
77
"name": "Jan Paepke",

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ <h2>Usage</h2><pre><code class="lang-javascript">// init controller
166166
</code></pre>
167167
<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>
168168
<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>
169-
<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>
169+
<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>
170170
<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>
171171
<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>
172172
</section>
@@ -214,7 +214,7 @@ <h2>
214214

215215

216216
<dt class="tag-version">Version:</dt>
217-
<dd class="tag-version"><ul class="dummy"><li>1.0.4</li></ul></dd>
217+
<dd class="tag-version"><ul class="dummy"><li>1.0.5</li></ul></dd>
218218

219219

220220

‎docs/jquery.scrollmagic.debug.js.html

+41-47
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
101101
by Jan Paepke 2014 (@janpaepke)
102102
http://janpaepke.github.io/ScrollMagic
103103

104-
@version 1.0.4
104+
@version 1.0.5
105105
@license Dual licensed under MIT license and GPL.
106106
@author Jan Paepke - [email protected]
107107
*/
@@ -232,28 +232,19 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
232232
parentOffset = cParams.container.offset() || {top: 0, left: 0},
233233
parentPos = cParams.vertical ? parentOffset.top : parentOffset.left,
234234
hookPos = (cParams.size * scene.triggerHook()) + parentPos,
235-
direction = cParams.vertical ? "v" : "h",
236-
resetCSS = { // reset (in case scene is removed from a horizontal scene and added to a vertical one)
237-
"border": "none",
238-
top: "auto",
239-
bottom: "auto",
240-
left: "auto",
241-
right: "auto"
242-
};
243-
if (!cParams.isDocument) {
244-
hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
245-
}
235+
direction = cParams.vertical ? "v" : "h";
246236

247237
if (cParams.isDocument) { // account for possible body positioning
248238
var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset;
249239
indicators.css({
250240
top: -bodyOffset.top,
251241
left: -bodyOffset.left
252242
})
243+
} else {
244+
hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
253245
}
254246

255247
$triggerHook
256-
.css(resetCSS)
257248
.attr("data-hook", hookPos)
258249
.attr("data-direction", direction)
259250
.data("parent", cParams.container);
@@ -263,47 +254,50 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
263254
$triggerHook.hide();
264255
} else {
265256
$triggerHook.show();
257+
var flip = hookPos > cParams.size*0.8; // put name above line?
266258
if (cParams.vertical) {
267259
// triggerHook
268260
$triggerHook.css({
269-
"border-top": "1px solid blue",
270-
padding: "0 8px 2px 8px",
261+
top: flip ? hookPos - $triggerHook.height() - 2 : hookPos,
262+
left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent,
271263
width: 40,
272-
top: hookPos,
273-
left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent
264+
height: "auto",
265+
padding: "0 8px 2px 8px",
266+
"border-top": flip ? "none" : "1px solid blue",
267+
"border-bottom": flip ? "1px solid blue" : "none",
268+
"border-left": "none",
269+
"border-right": "none"
274270
});
275-
// correct if too far down
276-
if (hookPos > cParams.size*0.8) {
277-
$triggerHook
278-
.css("border-bottom", "1px solid blue")
279-
.css("top", hookPos - $triggerHook.outerHeight(true))
280-
.css("border-top", "none");
281-
}
282271
} else {
283272
$triggerHook.css({
284-
"border-left": "1px solid blue",
273+
top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
274+
left: flip ? hookPos - $triggerHook.width() - 9: hookPos,
275+
width: "auto",
285276
height: 20,
286277
padding: "5px 5px 0 5px",
287-
top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
288-
left: hookPos,
278+
"border-top": "none",
279+
"border-bottom": "none",
280+
"border-left": flip ? "none" : "1px solid blue",
281+
"border-right": flip ? "1px solid blue" : "none"
289282
});
290-
// correct if too far right
291-
if (hookPos > cParams.size*0.8) {
292-
$triggerHook
293-
.css("border-right", "1px solid blue")
294-
.css("left", hookPos - $triggerHook.width() - parseFloat($triggerHook.css("padding-left")))
295-
.css("border-left", "none");
296-
}
297283
}
298284
}
299285

300286
if (!triggerOnly) {
301287
var
302288
startPos = scene.startPosition(),
303-
endPos = startPos + scene.duration();
289+
endPos = startPos + scene.duration(),
290+
resetCSS = {
291+
"border": "none",
292+
top: "auto",
293+
bottom: "auto",
294+
left: "auto",
295+
right: "auto"
296+
};
304297

305298
$start.css(resetCSS);
306299
$end.css(resetCSS);
300+
307301
if (scene.duration() == 0) {
308302
$end.hide();
309303
} else {
@@ -312,32 +306,32 @@ <h1 class="page-title">Source: jquery.scrollmagic.debug.js</h1>
312306
if (cParams.vertical) {
313307
// start
314308
$start.css({
315-
"border-top": "1px solid green",
309+
top: startPos,
316310
right: 71-cParams.container.scrollLeft() + options.indent,
317-
padding: "0 8px 0 8px",
318-
top: startPos
311+
"border-top": "1px solid green",
312+
padding: "0 8px 0 8px"
319313
});
320314
// end
321315
$end.css({
322-
"border-top": "1px solid red",
316+
top: endPos,
323317
right: 71-cParams.container.scrollLeft() + options.indent,
324-
padding: "0 8px 0 8px",
325-
top: endPos
318+
"border-top": "1px solid red",
319+
padding: "0 8px 0 8px"
326320
});
327321
} else {
328322
// start
329323
$start.css({
330-
"border-left": "1px solid green",
324+
left: startPos,
331325
bottom: 40-cParams.container.scrollTop() + options.indent,
332-
padding: "0 8px 0 8px",
333-
left: startPos
326+
"border-left": "1px solid green",
327+
padding: "0 8px 0 8px"
334328
});
335329
// end
336330
$end.css({
337-
"border-left": "1px solid red",
331+
left: endPos,
338332
bottom: 40-cParams.container.scrollTop() + options.indent,
339-
padding: "0 8px 0 8px",
340-
left: endPos
333+
"border-left": "1px solid red",
334+
padding: "0 8px 0 8px"
341335
});
342336
}
343337
}

‎docs/jquery.scrollmagic.js.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ <h1 class="page-title">Source: jquery.scrollmagic.js</h1>
109109
*/
110110
/**
111111
@overview ##Info
112-
@version 1.0.4
112+
@version 1.0.5
113113
@license Dual licensed under MIT license and GPL.
114114
@author Jan Paepke - [email protected]
115115

‎js/jquery.scrollmagic.debug.js

+41-47
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
by Jan Paepke 2014 (@janpaepke)
55
http://janpaepke.github.io/ScrollMagic
66
7-
@version 1.0.4
7+
@version 1.0.5
88
@license Dual licensed under MIT license and GPL.
99
@author Jan Paepke - [email protected]
1010
*/
@@ -135,28 +135,19 @@
135135
parentOffset = cParams.container.offset() || {top: 0, left: 0},
136136
parentPos = cParams.vertical ? parentOffset.top : parentOffset.left,
137137
hookPos = (cParams.size * scene.triggerHook()) + parentPos,
138-
direction = cParams.vertical ? "v" : "h",
139-
resetCSS = { // reset (in case scene is removed from a horizontal scene and added to a vertical one)
140-
"border": "none",
141-
top: "auto",
142-
bottom: "auto",
143-
left: "auto",
144-
right: "auto"
145-
};
146-
if (!cParams.isDocument) {
147-
hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
148-
}
138+
direction = cParams.vertical ? "v" : "h";
149139

150140
if (cParams.isDocument) { // account for possible body positioning
151141
var bodyOffset = indicators.offsetParent().is("body") ? $("body").offset() : parentOffset;
152142
indicators.css({
153143
top: -bodyOffset.top,
154144
left: -bodyOffset.left
155145
})
146+
} else {
147+
hookPos -= cParams.vertical ? $(document).scrollTop() : $(document).scrollLeft();
156148
}
157149

158150
$triggerHook
159-
.css(resetCSS)
160151
.attr("data-hook", hookPos)
161152
.attr("data-direction", direction)
162153
.data("parent", cParams.container);
@@ -166,47 +157,50 @@
166157
$triggerHook.hide();
167158
} else {
168159
$triggerHook.show();
160+
var flip = hookPos > cParams.size*0.8; // put name above line?
169161
if (cParams.vertical) {
170162
// triggerHook
171163
$triggerHook.css({
172-
"border-top": "1px solid blue",
173-
padding: "0 8px 2px 8px",
164+
top: flip ? hookPos - $triggerHook.height() - 2 : hookPos,
165+
left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent,
174166
width: 40,
175-
top: hookPos,
176-
left: (cParams.isDocument ? cParams.container.width() : parentOffset.left + cParams.container.width() - $(document).scrollLeft()) - 70 - options.indent
167+
height: "auto",
168+
padding: "0 8px 2px 8px",
169+
"border-top": flip ? "none" : "1px solid blue",
170+
"border-bottom": flip ? "1px solid blue" : "none",
171+
"border-left": "none",
172+
"border-right": "none"
177173
});
178-
// correct if too far down
179-
if (hookPos > cParams.size*0.8) {
180-
$triggerHook
181-
.css("border-bottom", "1px solid blue")
182-
.css("top", hookPos - $triggerHook.outerHeight(true))
183-
.css("border-top", "none");
184-
}
185174
} else {
186175
$triggerHook.css({
187-
"border-left": "1px solid blue",
176+
top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
177+
left: flip ? hookPos - $triggerHook.width() - 9: hookPos,
178+
width: "auto",
188179
height: 20,
189180
padding: "5px 5px 0 5px",
190-
top: (cParams.isDocument ? cParams.container.height() : parentOffset.top + cParams.container.height() - $(document).scrollTop()) - 40 - options.indent,
191-
left: hookPos,
181+
"border-top": "none",
182+
"border-bottom": "none",
183+
"border-left": flip ? "none" : "1px solid blue",
184+
"border-right": flip ? "1px solid blue" : "none"
192185
});
193-
// correct if too far right
194-
if (hookPos > cParams.size*0.8) {
195-
$triggerHook
196-
.css("border-right", "1px solid blue")
197-
.css("left", hookPos - $triggerHook.width() - parseFloat($triggerHook.css("padding-left")))
198-
.css("border-left", "none");
199-
}
200186
}
201187
}
202188

203189
if (!triggerOnly) {
204190
var
205191
startPos = scene.startPosition(),
206-
endPos = startPos + scene.duration();
192+
endPos = startPos + scene.duration(),
193+
resetCSS = {
194+
"border": "none",
195+
top: "auto",
196+
bottom: "auto",
197+
left: "auto",
198+
right: "auto"
199+
};
207200

208201
$start.css(resetCSS);
209202
$end.css(resetCSS);
203+
210204
if (scene.duration() == 0) {
211205
$end.hide();
212206
} else {
@@ -215,32 +209,32 @@
215209
if (cParams.vertical) {
216210
// start
217211
$start.css({
218-
"border-top": "1px solid green",
212+
top: startPos,
219213
right: 71-cParams.container.scrollLeft() + options.indent,
220-
padding: "0 8px 0 8px",
221-
top: startPos
214+
"border-top": "1px solid green",
215+
padding: "0 8px 0 8px"
222216
});
223217
// end
224218
$end.css({
225-
"border-top": "1px solid red",
219+
top: endPos,
226220
right: 71-cParams.container.scrollLeft() + options.indent,
227-
padding: "0 8px 0 8px",
228-
top: endPos
221+
"border-top": "1px solid red",
222+
padding: "0 8px 0 8px"
229223
});
230224
} else {
231225
// start
232226
$start.css({
233-
"border-left": "1px solid green",
227+
left: startPos,
234228
bottom: 40-cParams.container.scrollTop() + options.indent,
235-
padding: "0 8px 0 8px",
236-
left: startPos
229+
"border-left": "1px solid green",
230+
padding: "0 8px 0 8px"
237231
});
238232
// end
239233
$end.css({
240-
"border-left": "1px solid red",
234+
left: endPos,
241235
bottom: 40-cParams.container.scrollTop() + options.indent,
242-
padding: "0 8px 0 8px",
243-
left: endPos
236+
"border-left": "1px solid red",
237+
padding: "0 8px 0 8px"
244238
});
245239
}
246240
}

‎js/jquery.scrollmagic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Greensock License info at http://www.greensock.com/licensing/
1212
*/
1313
/**
1414
@overview ##Info
15-
@version 1.0.4
15+
@version 1.0.5
1616
@license Dual licensed under MIT license and GPL.
1717
@author Jan Paepke - [email protected]
1818

0 commit comments

Comments
 (0)