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