Permalink
Browse files

forceHeight now handles relative mode. fixes #58

  • Loading branch information...
1 parent faf1896 commit 3baf5538ca5d627c7aac6d56e2fbc5d4bb090a68 @Prinzhorn committed Sep 18, 2012
Showing with 47 additions and 37 deletions.
  1. +2 −1 README.md
  2. +1 −1 dist/skrollr.min.js
  3. +40 −12 src/skrollr.js
  4. +0 −10 test/index.html
  5. +4 −13 test/tests.js
View
@@ -343,7 +343,8 @@ Changelog
### 0.4.13
-* #59: Make scale option only affect absolute mode.
+* #58: `forceHeight` now handles relative mode like a boss.
+* #59: Make `scale` option only affect absolute mode.
### 0.4.12
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -216,8 +216,12 @@
//Update height of dummy div when window size is changed.
_reflow = function() {
- dummyStyle.height = (_maxKeyFrame + documentElement.clientHeight) + 'px';
+ //Will be recalculated by _updateDependentKeyFrames.
+ _maxKeyFrame = 0;
+
_updateDependentKeyFrames();
+
+ dummyStyle.height = (_maxKeyFrame + documentElement.clientHeight) + 'px';
};
} else {
_reflow = function() {
@@ -332,10 +336,6 @@
kf.frame = offset * _scale;
delete kf.offset;
-
- if(kf.frame > _maxKeyFrame) {
- _maxKeyFrame = kf.frame;
- }
}
}
//"relative" mode, where numbers are relative to anchors.
@@ -508,17 +508,45 @@
* That is "end" in "absolute" mode and all key frames in "relative" mode.
*/
var _updateDependentKeyFrames = function() {
- for(var skrollableIndex = 0; skrollableIndex < _skrollables.length; skrollableIndex++) {
- var sk = _skrollables[skrollableIndex];
- var anchorTarget = sk.anchorTarget;
- var keyFrames = sk.keyFrames;
+ var sk;
+ var anchorTarget;
+ var keyFrames;
+ var kf;
+ var skrollableIndex;
+ var keyFrameIndex;
- for(var keyFrameIndex = 0; keyFrameIndex < keyFrames.length; keyFrameIndex++) {
- var kf = keyFrames[keyFrameIndex];
+ //First process all relative-mode elements and find the max key frame.
+ for(skrollableIndex = 0; skrollableIndex < _skrollables.length; skrollableIndex++) {
+ sk = _skrollables[skrollableIndex];
+ anchorTarget = sk.anchorTarget;
+ keyFrames = sk.keyFrames;
+
+ for(keyFrameIndex = 0; keyFrameIndex < keyFrames.length; keyFrameIndex++) {
+ kf = keyFrames[keyFrameIndex];
if(kf.mode === 'relative') {
kf.frame = _instance.relativeToAbsolute(anchorTarget, kf.anchors[0], kf.anchors[1]) - kf.offset;
- } else if(kf.isEnd) {
+ }
+
+ //Only search for max key frame when forceHeight is enabled.
+ if(_forceHeight) {
+ //Find the max key frame, but don't use one of the data-end ones for comparison.
+ if(!kf.isEnd && kf.frame > _maxKeyFrame) {
+ _maxKeyFrame = kf.frame;
+ }
+ }
+ }
+ }
+
+ //Now process all data-end keyframes.
+ for(skrollableIndex = 0; skrollableIndex < _skrollables.length; skrollableIndex++) {
+ sk = _skrollables[skrollableIndex];
+ keyFrames = sk.keyFrames;
+
+ for(keyFrameIndex = 0; keyFrameIndex < keyFrames.length; keyFrameIndex++) {
+ kf = keyFrames[keyFrameIndex];
+
+ if(kf.isEnd) {
kf.frame = _maxKeyFrame - kf.offset;
}
}
View
@@ -32,14 +32,6 @@
position:fixed;
}
- #spacer {
- width:1px;
- height:10000px;
- position:absolute;
- top:0;
- left:0;
- }
-
#float {
position:static !important;
}
@@ -61,8 +53,6 @@
<div id="foreign-anchor" data-top="padding:200px;" data-top-center="padding:100px;" data-anchor-target="#anchor-2"></div>
<div id="float" data-start="float:none;" data-500="float:left;" style="background:red;">TEST</div>
- <div id="spacer"></div>
-
<div id="qunit"></div>
<script src="qunit.js" type="text/javascript"></script>
View
@@ -140,12 +140,6 @@ scrollTests(500, [
}
},
{
- element: $('#end'),
- styles: {
- fontSize: '90px'
- }
- },
- {
element: $('#foreign-anchor'),
styles: {
paddingTop: '100px',
@@ -271,12 +265,6 @@ scrollTests(250, [
}
},
{
- element: $('#end'),
- styles: {
- fontSize: '50px'
- }
- },
- {
element: newElement,
styles: {
bottom: '100px'
@@ -299,7 +287,10 @@ scrollTests(250, [
}
]);
-scrollTests(1000, [
+//We scroll to a ridiculous large position so that the browser cuts it at the actual position.
+var maxScrollHeight = s.setScrollTop(1e5) && s.getScrollTop();
+
+scrollTests(maxScrollHeight, [
{
element: $('#anchor-1'),
styles: {

0 comments on commit 3baf553

Please sign in to comment.