Turn any element into an infinite scrolling region with content that loads on demand.

Usage

Because of its dependency on a dataSource, you must initialize an infinitescroll() component via JavaScript:

{% highlight js %} $('#myInfiniteScroll').infinitescroll({ //dataSource is required to append additional content dataSource: function(helpers, callback){ //passing back more content callback({ content: '...' }); } }); {% endhighlight %}

Markup

Simply place class="infinitescroll" on an element of your choosing (preferably a div or span).

{% highlight html %}

{% endhighlight %}

Options

You can pass options via JavaScript at initialization.

Name	type	default	description
dataSource	function	null	Called whenever the user scrolls the specified percentage towards the bottom. Arguments passed include a `helpers` object and `callback` function. The `helpers` object contains current `percentage` and `scrollTop` values. The `callback` function appends more content to the element. Pass an object back within the `callback` function structured as follows: `{ content: '...' }` If you append no additonal content, add the attribute `end: true` to that object. This code will append `'---------'` by default and prevent further dataSource calls. Pass a string value for the `end` attribute to append that string instead of the default.
hybrid	boolean OR object	false	Indicates whether the code will use "hybrid mode" and require the user to click a button before loading additional content. If set to `true`, the code will use a default "load more" icon within the button. Additionally, you can set the control to an object with the following structure: `{ label: (string or jQuery obj) }` The code will then append the `label` attribute value within the button instead of the default icon.
percentage	number	95	Percentage scrolled to the bottom before calling the dataSource function for more content.

Methods

.infinitescroll('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.infinitescroll('disable');

Ensures the infinite scrolling region is disabled

.infinitescroll('enable');

Ensures the infinite scrolling region is enabled

.infinitescroll('end');

Disables the infinite scrolling region and appends an "end" indicator {% highlight js %}$('#myInfiniteScroll').infinitescroll('fetchData');{% endhighlight %} {% highlight js %}$('#myInfiniteScroll').infinitescroll('fetchData', {content: 'endicator'});{% endhighlight %}

Parameter	description
content	Optional. String or jQuery object appended as an "end" indicator. Defaults to `'---------'`

.infinitescroll('fetchData');

Tells the infinite scrolling region to make a call to its dataSource for additional content. {% highlight js %}$('#myInfiniteScroll').infinitescroll('fetchData');{% endhighlight %} {% highlight js %}$('#myInfiniteScroll').infinitescroll('fetchData', {force: true});{% endhighlight %}

Parameter	description
force	Optional. Boolean dictating whether to bypass the button click in hybrid mode and immediately call dataSoruce for more content. Defaults to `false`

Examples