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.
