jQuery Infinite Scroll

---

Demo

http://www.21studio.com/infiniteScroll

What's new in version 1.2

1. Now support bower, just type bower install infiniteScroll

What's new in version 1.1

1. Adding event hooks
2. Adding property enable
3. jQuery No Conflict Support

How to use

HTML

  <div id="wrapper">
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <a class="url" data-href="http://yourweb/yourfile.php">
  </div>

Calling jQuery Infinite Scroll

  $('#wrapper').infiniteScroll();

yourfile.php

  if(allDataHaveBeenLoaded()){
    echo 'done';
  }
  else{
    //whatever you want to display
  }

To disable it, just do

  $("#wrapper").infiniteScroll({enable:false});

Available Options

Options	Explanations	Default
classNextSelector	Class Selector to fetch next data	.url:last
dataAttributeNextSelector	Data attribute that containing url to fetch next data	href
enable	Enabling jQuery Infinite Scroll	true
resultWord	The word that telling jQuery Infinite Scroll that all data have been loaded	done
loading	Something you want to display when jQuery Infinite Scroll fetch next data	<div class="loading" style="text-align:center;">Loading...</div>
classLoading	The class of something you want to display when jQuery Infinite Scroll fetch next data	loading
startAt	The position of scroll bar to start fetch next data (0 <= startAt <= 1)	1
animation	The animation of displaying next data (available animation : fade or slide)	fade
animationSpeed	The speed of your animation, it can be slow, fast, or speed of millisecond	slow
done	Something you want to display when all data have been loaded	<div style="text-align:center;">It\'s done.</div>

Event Hooks

Event	Explanations
onLoad	Doing something when loading next data
success	Doing something when loading is success
onFinish	Doing something when all data have been loaded