-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathinfinitescroller.html
88 lines (80 loc) · 3.16 KB
/
infinitescroller.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
<title>Infinite Scroll Example</title>
<link rel="stylesheet" type="text/css" href="optional.css">
<style type="text/css">
/* Optional styles */
#infinitescroller {
background-color: White;
width: 50%;
height: 200px;
}
</style>
</head>
<body>
<div id="links">
<p>This is the live demo, <a href="http://www.stevefenton.co.uk/Content/Jquery-Infinite-Scroller/">view the documentation</a>.
Written by <a href="http://www.stevefenton.co.uk/">Steve Fenton</a>.</p>
</div>
<div id="header">
<h1>Infinite Scroller Example</h1>
</div>
<div id="maincontent">
<div id="what">
<h2>Infinite Scroller Summary</h2>
<p>The jQuery Infinite Scroller is a plugin that keeps adding content to a scrollable area as your website visitor nears the end of the content.</p>
<p>In this demo, I keep adding the same articles - but behind the scenes the plugin requests page 1, then page 2 and so on.</p>
</div>
<div id="how">
<div id="infinitescroller">
<div>
<h3>Start</h3>
<p>You can start with existing content. Start scrolling and as you near the end of the current content, more will be added.</p>
</div>
</div>
<p>Please <a href="http://www.stevefenton.co.uk/Content/Jquery-Infinite-Scroller/">read the infinite scroller documentation</a>
for instructions on how to use the plugin.</p>
</div>
<div id="options">
<h2>Options</h2>
<dl>
<dt>innerscrollerid</dt>
<dd>The id that will be applied to the inner scroll container.</dd>
<dt>uri</dt>
<dd>The full web address a page that provides more articles, which must be on the same domain (otherwise you'll hit cross-site-scripting issues).
Add the #MODIFIER# place holder, which wil be replaced with the page number being requested.</dd>
<dt>modifier</dt>
<dd>The page number to start from, your paging logic will normally require that you start with either 0 or 1.</dd>
<dt>width</dt>
<dd>The desired width of the scroll area (or just set it using CSS).</dd>
<dt>height</dt>
<dd>The desired height of the scroll area (or just set it using CSS).</dd>
<dt>overflow</dt>
<dd>Set to "auto" by default, set this to "hidden" if you want to use your own scrolling logic instead of the browser scrollbars.</dd>
<dt>offset</dt>
<dd>The higher you set this number, the earlier more results will be retrieved. Use this to optimise the scrolling experience.</dd>
</dl>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitescroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infinitescroller").infinitescroller( {
innerscrollerid: "innerscroller",
uri: "infinitefakedata.html?Page=#MODIFIER#",
modifier: "0",
overflow: "auto",
offset: "100"
});
});
</script>
<!-- Just for web stats... not needed for the plugin -->
<script type="text/javascript">
var myMasterUri = "http://www.stevefenton.co.uk/";
var myStatUrl = "http://www.stevefenton.co.uk/reports/";
</script>
<script type="text/javascript" src="/reports/swiftstats.js"></script>
</body>
</html>