Drupal Technical

[Drupal] How to use jQuery Plugin for Infinite Scrolling / Auto Paging - jmscroll

Aby.va | | 2 min read

Jmscroll is a simple jQuery infinite scroll plugin which observes the scroll event and loads the next set of content If it available. It is a another type of Philip Klauzinski's jscroll Plugin. We can use this jQuery Plugin for various variety type of scrolling sites.

The basic steps for using jmscroll are:

When using this plugin Include the needed jQuery < jQuery Mobile in the document.


    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

Also Include the jQuery jmscroll plugin after jQuery library.


    <script src="jmscroll.min.js"></script>

Next, Add a link at the bottom of your content to loading more content by clicking.


    <a class="next" href="example.html">Load More</a>

We can also create a footer that is always visible continuously scroll down the page.


    <div class="footer">
    ...
    </div>

Finally Call the plugin on your content wrapper and done.


    <script>
    $('.content').jmscroll({
      autoTrigger: true,
      maxPages: 5,
      loadingHtml: 'Loading',
      loadingSpeed: 800,
      contentSelector: '.item, a.next',
      nextSelector:'a.next:last',
      footerSelector:'.footer',
      footerPadding:0,
      callback:false
    });
    </script>

The parameters define as:

autoTrigger: True or False for loading automatically or by clicking a button
maxPages: If you want to get to the footer you need to define a maximum page number
loadingHtml: Html to show while loading the next content
loadingSpeed: You can delay the loading (most likely for testing purposes)
contentSelector: Selector for loading only part of the response
nextSelector: Selector to find the link which contains the href pointing to the next set of content
footerSelector: Footer selector
footerPadding: The distance from the footer at which to trigger the loading of the next set of content
callback: callback to be called at the end of each page load

Demo:Jmscroll

 

 

Related Topics