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. |