Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Bumped version to 1.4.3 - Updated the doc, updated the demo (added a …

…DOM-based demo) and cleaned up some code.
  • Loading branch information...
commit b3b48d2936c40501413974fcfc93e7098e7d823e 1 parent 5b85272
@fredwu fredwu authored
Showing with 94 additions and 56 deletions.
  1. +17 −12 README.md
  2. +69 −36 index.html
  3. +8 −8 js/jquery.endless-scroll.js
View
29 README.md
@@ -6,14 +6,15 @@ I have developed a jQuery plugin to easily achieve this.
There are a few options to customise the behaviour of this plugin:
-- _bottomPixels_ (integer) – the number of pixels from the bottom of the page that triggers the event
-- _fireOnce_ (boolean) – only fire once until the execution of the current event is completed
-- _fireDelay_ (integer) – delay the subsequent firing, in milliseconds. 0 or false to disable delay.
-- _loader_ (string) – HTML loader
-- _data_ (string) – plain HTML data
-- _insertAfter_ (string) – jQuery selector syntax: where to put the loader as well as the plain HTML data
-- _callback_ (function) – callback function, accepets one argument: fire sequence (the number of times the event triggered during the current page session)
-- _resetCounter_ (function) – resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event
+- _bottomPixels_ (integer) - the number of pixels from the bottom of the page that triggers the event
+- _fireOnce_ (boolean) - only fire once until the execution of the current event is completed
+- _fireDelay_ (integer) - delay the subsequent firing, in milliseconds, 0 or false to disable delay
+- _loader_ (string) - the HTML to be displayed during loading
+- _data_ (string|function) - plain HTML data, can be either a string or a function that returns a string, when passed as a function it accepts one argument: fire sequence (the number of times the event triggered during the current page session)
+- _insertAfter_ (string) - jQuery selector syntax: where to put the loader as well as the plain HTML data
+- _callback_ (function) - callback function, accepts one argument: fire sequence (the number of times the event triggered during the current page session)
+- _resetCounter_ (function) - resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event
+- _ceaseFire_ (function) - stops the event (no more endless scrolling) if the function returns true
In a typical scenario, you won’t be using the `data` option, but rather the `callback` option. You may use it to trigger an AJAX call and updates/inserts your page content.
@@ -39,6 +40,10 @@ $(document).endlessScroll({
## Changelog
+v1.4.3 [2011-06-28]
+
+- The `data` option now accepts a fireSequence argument too.
+
v1.4.2 [2011-01-08]
- Fixed a bug where calling the script on $(document) would fail.
@@ -49,19 +54,19 @@ v1.4.1 [2010-06-18]
v1.4 [2010-06-18]
-- Endless Scroll now works with any elements, not just $(document)!
+- Endless Scroll now works with any elements, not just `$(document)`!
v1.3 [2009-04-20]
-- Fixed a bug caused by fireDelay.
+- Fixed a bug caused by `fireDelay`.
v1.2 [2009-01-16]
-- Added resetCounter option.
+- Added `resetCounter` option.
v1.1 [2009-01-15]
-- Added fireDelay option.
+- Added `fireDelay` option.
v1.0 [2009-01-15]
View
105 index.html
@@ -1,47 +1,80 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>Endless Scroll Demo (by Fred Wu)</title>
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+ <title>Endless Scroll Demo (by Fred Wu)</title>
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
- <style type="text/css" media="screen">
- * { margin: auto; }
- body { margin: 20px 0; background: #cee; font-family: Helvetica, Arial, Verdana, 'Lucida Grande', sans-serif; }
- h1, h3 { text-align: center; }
- ul { text-align: center; list-style: none; }
- </style>
+ <style type="text/css" media="screen">
+ * { margin: auto; }
+ body { margin: 20px 0; background: #cee; font-family: Helvetica, Arial, Verdana, 'Lucida Grande', sans-serif; }
+ h1, h3 { text-align: center; }
+ ul#list { width: 50px; height: 200px; overflow-y: scroll; }
+ ul#images { text-align: center; list-style: none; }
+ </style>
- <script type="text/javascript" src="js/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
- <script type="text/javascript" charset="utf-8">
- $(document).ready(function() {
- $(document).endlessScroll({
- bottomPixels: 500,
- fireDelay: 10,
- callback: function(p){
- var last_img = $("ul#list li:last");
- last_img.after(last_img.prev().prev().prev().prev().prev().prev().clone());
- }
- });
- });
- </script>
+ <script type="text/javascript" src="js/jquery.min.js"></script>
+ <script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+ $('ul#list').endlessScroll({
+ bottomPixels: 500,
+ fireDelay: 10,
+ insertAfter: "ul#list li:last",
+ data: function(i) {
+ console.log(i)
+ return '<li>' + i + '</li>'
+ }
+ });
+ $(document).endlessScroll({
+ bottomPixels: 500,
+ fireDelay: 10,
+ callback: function(i) {
+ console.log(i)
+ var last_img = $("ul#images li:last");
+ last_img.after(last_img.prev().prev().prev().prev().prev().prev().clone());
+ }
+ });
+ });
+ </script>
</head>
<body>
- <h1>Endless Scroll Demo</h1>
- <h3>by Fred Wu</h3>
- <br />
- <ul id="list">
- <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
- <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
- <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
- <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
- <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
- <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
- <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
- </ul>
+ <h1>Endless Scroll Demo</h1>
+ <h3>by Fred Wu</h3>
+ <br />
+ <ul id="list">
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ <li>8</li>
+ <li>9</li>
+ <li>10</li>
+ <li>11</li>
+ <li>12</li>
+ <li>13</li>
+ <li>14</li>
+ <li>15</li>
+ <li>16</li>
+ <li>17</li>
+ <li>18</li>
+ <li>19</li>
+ <li>20</li>
+ </ul>
+ <br />
+ <ul id="images">
+ <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
+ <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
+ <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
+ <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
+ <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
+ <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
+ <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
+ </ul>
</body>
</html>
View
16 js/jquery.endless-scroll.js
@@ -1,7 +1,7 @@
/**
* Endless Scroll plugin for jQuery
*
- * v1.4.2
+ * v1.4.3
*
* Copyright (c) 2008 Fred Wu
*
@@ -30,11 +30,13 @@
*
* bottomPixels integer the number of pixels from the bottom of the page that triggers the event
* fireOnce boolean only fire once until the execution of the current event is completed
- * fireDelay integer delay the subsequent firing, in milliseconds. 0 or false to disable delay.
+ * fireDelay integer delay the subsequent firing, in milliseconds, 0 or false to disable delay
* loader string the HTML to be displayed during loading
- * data string|function plain HTML data, can be either a string or a function that returns a string
+ * data string|function plain HTML data, can be either a string or a function that returns a string,
+ * when passed as a function it accepts one argument: fire sequence (the number
+ * of times the event triggered during the current page session)
* insertAfter string jQuery selector syntax: where to put the loader as well as the plain HTML data
- * callback function callback function, accepets one argument: fire sequence (the number of times
+ * callback function callback function, accepts one argument: fire sequence (the number of times
* the event triggered during the current page session)
* resetCounter function resets the fire sequence counter if the function returns true, this function
* could also perform hook actions since it is applied at the start of the event
@@ -97,7 +99,7 @@
$(options.insertAfter).after("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");
- data = typeof options.data == 'function' ? options.data.apply(this) : options.data;
+ data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;
if (data !== false)
{
$("div#endless_scroll_loader").remove();
@@ -105,9 +107,7 @@
$("div#endless_scroll_data").hide().fadeIn();
$("div#endless_scroll_data").removeAttr("id");
- var args = new Array();
- args[0] = fireSequence;
- options.callback.apply(this, args);
+ options.callback.apply(this, [fireSequence]);
if (options.fireDelay !== false || options.fireDelay !== 0)
{
Please sign in to comment.
Something went wrong with that request. Please try again.