Introduction

scrollHappen jQuery plugin basically meant for the developers who want to load content while scroll bar touch to bottom and fill the canvas while there is no scroll bar in the page. It has several limitation and also have lots of advantages. As I have provided a button (Load Rest)at the end of the scroll Cycle which enable the user to load the rest of the element on clicking that button. As Other plug-ins provide infinite scrolling feature I do so because it's important for one who don't want any kind of limitation on scrolling and loading the elements on scroll touch to the bottom.

Testing

This plug-in is been tested on all browser (Mozilla, Chrome, IE > 8, Safari) and it works perfectly in all browser's and also on each zoom level of each browser.

Plugin defaults(optional)

These defaults are already mentioned within plug-in so if you won't mention it while defining it on your page then it would behave default.

defaults: {
            infiniteScroll: false, 
            initialLimit: 4,
            limit: 4,
            cycle: 3,
            ajaxSettings: {
                async: false,
                global: false,
                type: 'GET',
                dataType: 'script'
            },
            loadingHtmlAttrs: {
                content: '<small>loading...</small>',
                class: 'loading'
            },
            loadRestCallbackAttrs: {
                content: '<button>Load Rest</button>',
                class: 'load_rest'
            },
            loadRestCallback: function () {
            }
        }

Required options

{
   url: 'url to hit for next set of element',
   total_elements: 'you need to define the total no. of elements you want to iterate on',
}

As you know you can change the defaults as per your requirement.

Options description

Option key Default value Description
infiniteScroll false this option enable loading of elements while scrollbar hit to bottom until all element will load and it also will disable the Load Rest Button functionality.
initialLimit 4 It is the limit of element the developer want to load initially.
limit 4 It tells the plug-in how much of element will load on each scroll touch to bottom.
cycle 3 It tells the plug-in how many times you want scrolling functionality.
loadRestCallback nil It is a callback provided to load rest of the element with the help of offset and limit which is provided by the plugin.
loadingHtmlAttrs content: 'loading...', class: 'loading' It is provided for showing the loading content means if scroll bar hit to bottom it takes some time for response so I am showing the loading content.
loadRestCallbackAttrs content: 'Load Rest', class: 'load_rest' It is the button (which loads rest of the elements) configuration I provided it with type button and class load_rest you can change it for your likeness.
ajaxSettings async: false, global: false, type: 'GET', dataType: 'script' It is provided as if developer want some different ajaxSettings for its own ajax request.

How To

To use scrollHappen Plug-in you need to download it first and include it in your application. Apply this plug-in on a class or id where it contains loading element means apply it on the parent div of loading element. for e.g.

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

Now apply it on the parent div with some must required options of plug-in: 

$('.parent').scrollHappen(function(){
     url: 'url to hit for next set of element',
     total_elements: 'you need to define the total no. of elements you want to iterate on',
     initialLimit: 4,      
     limit: 6,
     inifiniteScroll: true
});

In this example I applied this plugin on the parent class now it takes the initialLimit: 4 means it first load 4 elements after that on each scroll hit to bottom it loads 6 element and it will continue to do so because the infiniteScroll is true.

License

scrollHappen is © 2015 @nitanshu and dual licensed under the MIT and GPL Version 2 licenses.