View on GitHub

Heap-infinite-scroll

Download this project as a .zip file Download this project as a tar.gz file

An example of a scroll with different parameter values size and compact

size: 'proportional'
compact: true

size: 'proportional'
compact: false

size: 'square'
compact: true

size: 'square'
compact: false

          jQuery(function() {

            var search1 = new HeapGoogleSearch(),
                search2 = new HeapGoogleSearch(),
                search3 = new HeapGoogleSearch(),
                search4 = new HeapGoogleSearch(),
                btnClick = function() {
                    var val = $('#search-word').val();

                    search1.setQuery(val);
                    search2.setQuery(val);
                    search3.setQuery(val);
                    search4.setQuery(val);

                    scroll1.load();
                    scroll2.load();
                    scroll3.load();
                    scroll4.load();
                },
                scroll1 = new HeapInfiniteScroll('.proportional-compact-panel', {
                    margin: 10,
                    height: 80,
                    frameWidth: 0,
                    downloadIcon: '<i class="fa fa-refresh fa-spin"></i>',
                    url: search1
                }),
                scroll2 = new HeapInfiniteScroll('.proportional-uncompact-panel', {
                    margin: 10,
                    height: 80,
                    frameWidth: 0,
                    compact: false,
                    downloadIcon: '<i class="fa fa-cog fa-spin"></i>',
                    url: search2
                }),
                scroll3 = new HeapInfiniteScroll('.square-compact-panel', {
                    margin: 10,
                    height: 100,
                    frameWidth: 0,
                    size: 'square',
                    downloadIcon: '<i class="fa fa-spinner fa-spin"></i>',
                    url: search3
                }),
                scroll4 = new HeapInfiniteScroll('.square-uncompact-panel', {
                    margin: 10,
                    height: 100,
                    frameWidth: 0,
                    size: 'square',
                    compact: false,
                    downloadIcon: '<i class="fa fa-circle-o-notch fa-spin"></i>',
                    url: search4
                });

            $('#search-button').click(btnClick);

            setTimeout(function() {
                btnClick();
            }, 1000);
          });