0

I want to load more data while scrolling the contents. I found a solution from here: jQuery load more data on scroll

I want to use the jQuery Waypoint plugin. Can we load more data while scrolling, and implement in this fiddle?

http://jsfiddle.net/N5LZB/32/

var pages = [page_1, page_2, page_3, page_4, page_5];

var count=0;
$("#preRealTimeContents").html(pages[count]);

$("#realTimeContents").html(pages[count+1]);
Community
  • 1
  • 1
  • They have an example referred from their documentation. Did you check that? http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/ – hitesh israni Apr 14 '14 at 06:21
  • I found that but I am not able to implement on my fiddle –  Apr 14 '14 at 06:24
  • here is link of waypont jquerry js http://imakewebthings.com/jquery-waypoints/waypoints.js –  Apr 14 '14 at 06:24
  • What is your main problem? – Lal krishnan S L Apr 14 '14 at 06:26
  • I want smooth scrolling .It mean I don't want to hit bottom of div .I want to load data while scrolling .It mean When I was in last (last div ) it load more data –  Apr 14 '14 at 06:30
  • I want to use visible div concept .If user in last div it append more data . –  Apr 14 '14 at 06:31
  • Example on starting user See Page 1 and Page 2 .But when User scroll contend in Page 2 it load page 3 and when user on page 3 it load page 4 ...so on –  Apr 14 '14 at 06:32
  • This can be done When I hit bottom of div , But that is not smooth scrolling .I need smoth scrolling –  Apr 14 '14 at 06:33

1 Answers1

0

Try this,

var scrollFlag=true;
$('#fullContainer').scroll(function () {
    if (scrollFlag && this.scrollHeight - $(this).scrollTop() - $(this).offset().top - $(this).height() <= 0) {
        count++;
        if (count >= pages.length) scrollFlag = false;
        $("#preRealTimeContents").append(pages[count]);
    }
});

Non-circular live demo

Updated load all div once on scrolling like,

var pages = [page_1, page_2, page_3, page_4, page_5];
var count = 0;
$("#preRealTimeContents").html(pages[count]);
var scrollFlag=true;
$('#fullContainer').scroll(function () {
    for(i=1,len=pages.length;i<len;i++,count++) {
        if (count >= len) break;
        $("#preRealTimeContents").append(pages[count]);
    }
});

Demo

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Sorry it is not correct answer ,,It hit the bottom of dib..I need while scrolling –  Apr 14 '14 at 06:39
  • If you change the condition `if (scrollFlag && this.scrollHeight - $(this).scrollTop() - $(this).offset().top - $(this).height() <= 20) {` then it will not hit the bottom See this http://jsfiddle.net/rohankumar1524/N5LZB/39/ Also if there are minor change then you should also try it. – Rohan Kumar Apr 14 '14 at 06:41
  • ok First thing if user scroll fastly downword direction it load all page –  Apr 14 '14 at 06:44
  • can we restrict that it only load at one time –  Apr 14 '14 at 06:45
  • can we load more data (one page at one time).Because When User scroll fastly it load last page –  Apr 14 '14 at 06:51
  • your last demo is wrong I need when user hit bottom it load one page only some time it load more pages –  Apr 14 '14 at 06:53
  • I applied your concept in this fiddle please check http://jsfiddle.net/N5LZB/42/ it looking nice.But When I check on Ipad and scroll to bottom fastly it load last page –  Apr 14 '14 at 06:55
  • it is working fine in desktop browser.Please check fiddle .It is showing page 4 and page 5.When you scroll bottom it do nothing,But when You scroll up it load page 3 and then page 2..so on.It work fine in IPAD.But Now when User scroll bottom it should load page 3 and page 4 one at one time .But when user scroll fast it state way load page 5 –  Apr 14 '14 at 06:58
  • Please check my fiddle –  Apr 14 '14 at 07:00