Skip to content

Commit 374f7ed

Browse files
stutrekstutrek
committed
fix examples
1 parent 240f813 commit 374f7ed

9 files changed

+282
-325
lines changed

‎demos/divInADiv.html

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -105,32 +105,33 @@ <h2>Just for you.</h2>
105105
</div>
106106
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
107107
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
108-
<script src="../scrollMonitor.js"></script>
108+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
109109
<script type="text/javascript">
110-
var boxHtml = (new Array(100)).join('<span class="box"></span>');
111-
$('.insert-boxes-here').html(boxHtml);
110+
requirejs(['../dist/index.js'], function () {
111+
var boxHtml = (new Array(100)).join('<span class="box"></span>');
112+
$('.insert-boxes-here').html(boxHtml);
112113

113-
function listener(event, watcher) {
114-
if (!watcher.isInViewport) {
115-
return;
116-
} else if (watcher.isFullyInViewport) {
117-
watcher.watchItem.style.backgroundColor = '#fcc';
118-
} else if (watcher.isAboveViewport) {
119-
watcher.watchItem.style.backgroundColor = '#ccf';
120-
} else if (watcher.isBelowViewport) {
121-
watcher.watchItem.style.backgroundColor = '#ffc';
122-
}
123-
}
114+
function listener(event, watcher) {
115+
if (!watcher.isInViewport) {
116+
return;
117+
} else if (watcher.isFullyInViewport) {
118+
watcher.watchItem.style.backgroundColor = '#fcc';
119+
} else if (watcher.isAboveViewport) {
120+
watcher.watchItem.style.backgroundColor = '#ccf';
121+
} else if (watcher.isBelowViewport) {
122+
watcher.watchItem.style.backgroundColor = '#ffc';
123+
}
124+
}
124125

125-
$('.scroller').each(function (i, element) {
126-
var boxes = $('> .insert-boxes-here > .box', element);
127-
var container = scrollMonitor.createContainer(element);
128-
boxes.each(function (i, boxEl) {
129-
var watcher = container.create(boxEl);
130-
watcher.stateChange(listener);
131-
listener(null, watcher);
126+
$('.scroller').each(function (i, element) {
127+
var boxes = $('> .insert-boxes-here > .box', element);
128+
var container = scrollMonitor.createContainer(element);
129+
boxes.each(function (i, boxEl) {
130+
var watcher = container.create(boxEl);
131+
watcher.stateChange(listener);
132+
});
133+
container.recalculateLocations();
132134
});
133135
});
134-
135136
</script>
136137
</body>

‎demos/fixed.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,21 @@
3737
</div>
3838
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
3939
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
40-
<script src="../scrollMonitor.js"></script>
40+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
4141
<script type="text/javascript">
42+
requirejs(['../dist/index.js'], function () {
43+
var watchers = $('span').map(function(i, element) {
4244

43-
var watchers = $('span').map(function(i, element) {
45+
var watcher = scrollMonitor.create( element );
4446

45-
var watcher = scrollMonitor.create( element );
47+
watcher.lock();
4648

47-
watcher.lock();
48-
49-
watcher.stateChange(function() {
50-
$(element).toggleClass('fixed', this.isAboveViewport)
49+
watcher.stateChange(function() {
50+
$(element).toggleClass('fixed', this.isAboveViewport)
51+
});
52+
return watcher;
5153
});
52-
return watcher;
54+
console.log(watchers);
5355
});
54-
console.log(watchers);
55-
5656
</script>
5757
</body>

‎demos/list.html

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -44,52 +44,52 @@
4444
<div id="target"></div>
4545
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
4646
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
47-
<script src="../scrollMonitor.js"></script>
47+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
4848
<script type="text/javascript">
49-
//requirejs(['../scrollMonitor'], function( scrollMonitor ) {
50-
$.getJSON('./listdata.json', function( data ) {
51-
52-
// fill the document with HTML
53-
var htmlBuffer = [];
54-
$.each(data, function( type, beerMap ) {
55-
htmlBuffer.push('<section><h2>'+type+'</h2><ul>');
56-
57-
var breweries = Object.keys(beerMap);
58-
breweries.sort();
59-
breweries.forEach(function( brewery ) {
60-
var beers = beerMap[brewery].sort();
61-
htmlBuffer.push('<li>'+brewery+': <i>'+beers.join(', ')+'</i></li>');
62-
})
63-
htmlBuffer.push('</li></section>');
64-
});
65-
$('#target').html(htmlBuffer.join(''));
66-
67-
// anchor the section header
68-
var h2Height = $('h2').innerHeight();
69-
70-
71-
$('section').each(function(index, section) {
49+
requirejs(['../dist/index.js'], function () {
50+
$.getJSON('./listdata.json', function( data ) {
7251

73-
var sectionWatcher = scrollMonitor.create(section)
52+
// fill the document with HTML
53+
var htmlBuffer = [];
54+
$.each(data, function( type, beerMap ) {
55+
htmlBuffer.push('<section><h2>'+type+'</h2><ul>');
56+
57+
var breweries = Object.keys(beerMap);
58+
breweries.sort();
59+
breweries.forEach(function( brewery ) {
60+
var beers = beerMap[brewery].sort();
61+
htmlBuffer.push('<li>'+brewery+': <i>'+beers.join(', ')+'</i></li>');
62+
})
63+
htmlBuffer.push('</li></section>');
64+
});
65+
$('#target').html(htmlBuffer.join(''));
66+
67+
// anchor the section header
68+
var h2Height = $('h2').innerHeight();
7469

75-
var sectionMinusBottomHeadline = scrollMonitor.create(section, {bottom: -1*h2Height});
7670

77-
sectionMinusBottomHeadline.stateChange( function() {
71+
$('section').each(function(index, section) {
7872

79-
if (!sectionWatcher.isInViewport) {
80-
section.className = '';
81-
} else if (sectionMinusBottomHeadline.isInViewport && sectionMinusBottomHeadline.isAboveViewport) {
82-
section.className = 'fixed';
83-
} else if (sectionMinusBottomHeadline.isAboveViewport) {
84-
section.className = 'bottom';
85-
} else {
86-
section.className = '';
87-
}
73+
var sectionWatcher = scrollMonitor.create(section)
8874

89-
} )
90-
})
91-
75+
var sectionMinusBottomHeadline = scrollMonitor.create(section, {bottom: -1*h2Height});
76+
77+
sectionMinusBottomHeadline.stateChange( function() {
78+
79+
if (!sectionWatcher.isInViewport) {
80+
section.className = '';
81+
} else if (sectionMinusBottomHeadline.isInViewport && sectionMinusBottomHeadline.isAboveViewport) {
82+
section.className = 'fixed';
83+
} else if (sectionMinusBottomHeadline.isAboveViewport) {
84+
section.className = 'bottom';
85+
} else {
86+
section.className = '';
87+
}
88+
89+
} )
90+
})
91+
92+
});
9293
});
93-
//});
9494
</script>
9595
</body>

‎demos/listInDiv.html

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -57,55 +57,57 @@
5757
<div id="target"></div>
5858
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
5959
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
60-
<script src="../scrollMonitor.js"></script>
60+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
6161
<script type="text/javascript">
62+
requirejs(['../dist/index.js'], function () {
6263

63-
$.getJSON('./listdata.json', function( data ) {
64+
$.getJSON('./listdata.json', function( data ) {
6465

65-
var target = $('#target')[0];
66+
var target = $('#target')[0];
6667

67-
// fill the document with HTML
68-
var htmlBuffer = [];
69-
$.each(data, function( type, beerMap ) {
70-
htmlBuffer.push('<section><h2>'+type+'</h2><ul>');
68+
// fill the document with HTML
69+
var htmlBuffer = [];
70+
$.each(data, function( type, beerMap ) {
71+
htmlBuffer.push('<section><h2>'+type+'</h2><ul>');
7172

72-
var breweries = Object.keys(beerMap);
73-
breweries.sort();
74-
breweries.forEach(function( brewery ) {
75-
var beers = beerMap[brewery].sort();
76-
htmlBuffer.push('<li>'+brewery+': <i>'+beers.join(', ')+'</i></li>');
77-
})
78-
htmlBuffer.push('</li></section>');
79-
});
80-
$(target).html(htmlBuffer.join(''));
81-
var containerWatcher = scrollMonitor.createContainer(target);
73+
var breweries = Object.keys(beerMap);
74+
breweries.sort();
75+
breweries.forEach(function( brewery ) {
76+
var beers = beerMap[brewery].sort();
77+
htmlBuffer.push('<li>'+brewery+': <i>'+beers.join(', ')+'</i></li>');
78+
})
79+
htmlBuffer.push('</li></section>');
80+
});
81+
$(target).html(htmlBuffer.join(''));
82+
var containerWatcher = scrollMonitor.createContainer(target);
8283

83-
// anchor the section header
84-
var h2Height = $('h2').innerHeight();
84+
// anchor the section header
85+
var h2Height = $('h2').innerHeight();
8586

8687

8788

88-
$('section').each(function(index, section) {
89+
$('section').each(function(index, section) {
8990

90-
var sectionWatcher = containerWatcher.create(section)
91+
var sectionWatcher = containerWatcher.create(section)
9192

92-
var sectionMinusBottomHeadline = containerWatcher.create(section, {bottom: -1*h2Height});
93+
var sectionMinusBottomHeadline = containerWatcher.create(section, {bottom: -1*h2Height});
9394

94-
sectionMinusBottomHeadline.stateChange( function() {
95+
sectionMinusBottomHeadline.stateChange( function() {
9596

96-
if (!sectionWatcher.isInViewport) {
97-
section.className = '';
98-
} else if (sectionMinusBottomHeadline.isInViewport && sectionMinusBottomHeadline.isAboveViewport) {
99-
section.className = 'fixed';
100-
} else if (sectionMinusBottomHeadline.isAboveViewport) {
101-
section.className = 'bottom';
102-
} else {
103-
section.className = '';
104-
}
105-
106-
} );
97+
if (!sectionWatcher.isInViewport) {
98+
section.className = '';
99+
} else if (sectionMinusBottomHeadline.isInViewport && sectionMinusBottomHeadline.isAboveViewport) {
100+
section.className = 'fixed';
101+
} else if (sectionMinusBottomHeadline.isAboveViewport) {
102+
section.className = 'bottom';
103+
} else {
104+
section.className = '';
105+
}
106+
107+
} );
108+
});
109+
107110
});
108-
109111
});
110112
</script>
111113
</body>

‎demos/reloadTest.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,19 @@
2727
</div>
2828
<div class="footer"></div>
2929
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
30-
<script src="../scrollMonitor.js"></script>
31-
<script>
30+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
31+
<script type="text/javascript">
32+
requirejs(['../dist/index.js'], function () {
3233
var myElement = jQuery('.content');
3334

34-
var elementWatcher = scrollMonitor.create( myElement );
35+
var elementWatcher = scrollMonitor.create( myElement[0] );
3536

3637
elementWatcher.fullyEnterViewport(function() {
3738
console.log( 'I have fully entered the viewport' );
3839
});
3940
elementWatcher.partiallyExitViewport(function() {
4041
console.log( 'I have partially left the viewport' );
4142
});
42-
43-
</script>
43+
});
44+
</script>
4445
</body>

‎demos/scoreboard.html

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -59,52 +59,51 @@
5959
</div>
6060
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0; z-index:1000000" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
6161
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
62-
<script src="../scrollMonitor.js"></script>
62+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
6363
<script type="text/javascript">
64-
//requirejs(['../scrollMonitor'], function( scrollMonitor ) {
64+
requirejs(['../dist/index.js'], function () {
65+
var $account = $('#top-bar-content-container');
66+
var $header = $('#header-content-container');
67+
var $minisb = $('#minisb');
68+
var $footer = $('#footer');
6569

66-
var $account = $('#top-bar-content-container');
67-
var $header = $('#header-content-container');
68-
var $minisb = $('#minisb');
69-
var $footer = $('#footer');
70+
var accountWatcher = scrollMonitor.create( $account[0] );
71+
var headerWatcher = scrollMonitor.create( $header[0] );
7072

71-
var accountWatcher = scrollMonitor.create( $account );
72-
var headerWatcher = scrollMonitor.create( $header );
73+
// watch an area above the footer as tall as the scoreboard and header
74+
var footerWatcherTop = $minisb.height() + $header.height();
75+
var footerWatcher = scrollMonitor.create( $footer[0], {top: footerWatcherTop} );
7376

74-
// watch an area above the footer as tall as the scoreboard and header
75-
var footerWatcherTop = $minisb.height() + $header.height();
76-
var footerWatcher = scrollMonitor.create( $footer, {top: footerWatcherTop} );
77+
// the elements these two watch are going to have position: fixed.
78+
// we need to be sure that it always watches their original location.
79+
accountWatcher.lock();
80+
headerWatcher.lock();
7781

78-
// the elements these two watch are going to have position: fixed.
79-
// we need to be sure that it always watches their original location.
80-
accountWatcher.lock();
81-
headerWatcher.lock();
82+
accountWatcher.visibilityChange(function() {
83+
$header.toggleClass('fixed', !accountWatcher.isInViewport);
84+
});
85+
headerWatcher.visibilityChange(function() {
86+
$minisb.toggleClass('fixed', !headerWatcher.isInViewport);
87+
});
8288

83-
accountWatcher.visibilityChange(function() {
84-
$header.toggleClass('fixed', !accountWatcher.isInViewport);
85-
});
86-
headerWatcher.visibilityChange(function() {
87-
$minisb.toggleClass('fixed', !headerWatcher.isInViewport);
88-
});
89+
footerWatcher.fullyEnterViewport(function() {
90+
if (footerWatcher.isAboveViewport) {
91+
$minisb.removeClass('fixed')
92+
.addClass('hug-footer')
93+
}
94+
});
95+
footerWatcher.partiallyExitViewport(function() {
96+
if (!footerWatcher.isAboveViewport) {
97+
$minisb.addClass('fixed')
98+
.removeClass('hug-footer')
99+
}
100+
});
89101

90-
footerWatcher.fullyEnterViewport(function() {
91102
if (footerWatcher.isAboveViewport) {
92103
$minisb.removeClass('fixed')
93-
.addClass('hug-footer')
94-
}
95-
});
96-
footerWatcher.partiallyExitViewport(function() {
97-
if (!footerWatcher.isAboveViewport) {
98-
$minisb.addClass('fixed')
99-
.removeClass('hug-footer')
104+
.addClass('hug-footer')
100105
}
101-
});
102-
103-
if (footerWatcher.isAboveViewport) {
104-
$minisb.removeClass('fixed')
105-
.addClass('hug-footer')
106-
}
107106

108-
//});
107+
});
109108
</script>
110109
</body>

0 commit comments

Comments
 (0)