Permalink
Browse files

Refactored the code

  • Loading branch information...
1 parent 4251fc3 commit 8e20d9872410658312a6f397cbb02ca7963c371d @fredwu committed Apr 15, 2012
Showing with 227 additions and 132 deletions.
  1. +8 −2 README.md
  2. BIN img/ladybug.jpg
  3. +57 −46 index.html
  4. +158 −80 js/jquery.endless-scroll.js
  5. +4 −4 js/jquery.min.js
View
@@ -33,9 +33,9 @@ There are a few options to customise the behaviour of this plugin:
<td>The HTML to be displayed during loading.</td>
</tr>
<tr>
- <td>data</td>
+ <td>content</td>
<td>String or Function</td>
- <td>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).</td>
+ <td>Plain HTML content to insert after each call, 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).</td>
</tr>
<tr>
<td>insertAfter</td>
@@ -99,6 +99,12 @@ All modern browsers (Firefox, Chrome, Safari, Opera, IE7+) should be supported.
## Changelog
+v1.6.0 [master]
+
+- Refactored the code.
+- Renamed `data` option to `content`.
+- Tweaked the demo page.
+
v1.5.1 [2012-03-08]
- Added `fireSequence` argument to `ceaseFire`.
View
Deleted file not rendered
View
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
@@ -7,21 +7,24 @@
<style type="text/css" media="screen">
* { margin: auto; }
- body { margin: 20px 0; background: #cee; font-family: Helvetica, Arial, Verdana, 'Lucida Grande', sans-serif; }
+ body { margin: 20px 0; background: #abc; color: #111; font-family: Helvetica, Arial, Verdana, 'Lucida Grande', sans-serif; }
h1, h3, p { text-align: center; }
- ul#list { width: 50px; height: 200px; overflow-y: scroll; }
- ul#images { text-align: center; list-style: none; }
+ div.example { padding: 20px; margin: 10px auto; background: #bcd; width: 750px; }
+ div.example h3 { margin-bottom: 10px; }
+ ul, ol { padding: 0; }
+ #list { width: 50px; height: 150px; overflow-y: scroll; }
+ #images { width: 600px; height: 550px; overflow-x: hidden; text-align: center; list-style: none; }
.endless_scroll_loader { position: fixed; top: 10px; right: 20px; }
</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">
$(function() {
- $('ul#list').endlessScroll({
+ $('#list').endlessScroll({
fireOnce: false,
insertAfter: "ul#list div:last",
- data: function(i) {
+ content: function(i) {
console.log(i)
return '<li>' + i + '</li>'
},
@@ -33,13 +36,13 @@
intervalFrequency: 5
});
- $(window).endlessScroll({
+ $('#images').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());
+ last_img.after(last_img.prev().prev().prev().prev().prev().prev().prev().clone());
}
});
});
@@ -48,44 +51,52 @@
<body>
<h1>Endless Scroll Demo</h1>
- <h3>by Fred Wu</h3>
- <br /><br />
- <p>Stops after 10 calls.</p>
- <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 /><br />
- <p>Never stops.</p>
- <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>
+ <h3>by <a href="http://fredwu.me/">Fred Wu</a></h3>
+
+ <div class="example">
+ <h3>Ends in 10 calls:</h3>
+ <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>
+ </div>
+
+ <div class="example">
+ <h3>Never ending:</h3>
+ <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>
+ <li><img src="img/flowing-rock.jpg" width="580" height="360" alt="Grass Blades" /></li>
+ </ul>
+ </div>
+
+ <div class="example">
+ <p>Copyright &copy; <a href="http://fredwu.me/">Fred Wu</a></p>
+ </div>
+
</body>
</html>
Oops, something went wrong.

0 comments on commit 8e20d98

Please sign in to comment.