jonatas15 / jmscroll

j(m)scroll : Infinite Scrolling Plugin for jQuery / jQuery Mobile

jmscroll

j(m)scroll : Infinite Scrolling Plugin for jQuery / jQuery Mobile

A variation of Philip Klauzinski's excellent jscroll Plugin (http://jscroll.com). The only problem i had with it was that when jQuery Mobile was included jscroll was loading more than one page at initialization. Given that, and my need for a not fixed footer for social buttons, copyrights et al. i created a simpler version that loads next set of content when the user scrolls to the starting of the footer (or some predefined pxs above it). I would really like to know what breaks jscroll when jQuery Mobile is included. If you know the answer please share it with me. Unfortunately i don't have the time to find it myself.

You can find a simple working example in the example/ folder. The parameters you can define are:

debug	TRUE or FALSE for logging in browser's console.
autoTrigger	TRUE or FALSE for loading automatically or by clicking a button.
autoTriggerUntil	After the defined number of pages -which will be triggered automatically- a button click will trigger the loading of next pages. This is the one of the two ways you have to reach document's footer.
totalPages	The other one is the totalPages limit which defines the maximum page number (auto or manually triggered).
contentSelector	Selector for loading only part(s) of the response.
nextSelector	Selector to find the link which contains the href pointing to the next set of content.
footerSelector	Self-explanatory: The footer selector.
footerPadding	The distance from the footer at which to trigger the loading of the next set of content.
footerVisible	Set this parameter to FALSE in order to hide footer while auto triggering.
loadingContentDelay	For testing purposes -or because you have a real fancy progress bar you want your visitors to see- you can define a delay (in milliseconds) to the Ajax response.
progressType	html | spinner | bar [For Each Option There Are Extra Parameters] :
progressType='html'	loadingHtml HTML Markup to show while loading next (for example a loading .gif, though it is not a good idea due to poor mobile browser copatibility).
progressType='spinner'	For better compatibility you can try fgnass' spin.js (http://fgnass.github.io/spin.js/). You can define all the available parameters following the names of fgnass prefixed with 'spinner' (camel case). For example: spinnerLines The number of lines to draw. spinnerLength The length of each line (in px). spinnerWidth The line thickness (in px).
progressType='bar'	If none of the above suits your needs, you can go with the pure js progress bar: a span inside a full width div which is animated (in steps) to fill all the container. progressBarSpeed Milliseconds between each step of the animation. Old mobile browsers may have problems if you animate in many steps or too quickly. Use sparingly.
callback	Callback function to be called at the end of each page load.