Infinite-Scroll Jquery Plugin

infinite-scroll jquery plugin

You do not need infinite scroll plug-in for this. To detect when scroll reaches end of page, with jQuery you can do

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

Demo on JsFiddle

Infinite Scroll and Masonry jquery plugin - ways to make it load earlier and faster

try increasing the bufferPx in the infinite scroll options when calling the function. see here for more options:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Jquery infinite scrolling up plugin

I've made my own jQuery plugin for this:

https://github.com/prebenh/jQuery-ScrollUp

Here is an example:

http://scrollup.comule.com/

Infinite scroll jquery plugin in codeigniter

I have solved this solution using jquery ajax, without any plugin. Code is below...

//declaring variables
var base_url        = '<?php echo base_url(); ?>';
var offset          = 2; //customize this as your need
var request_ajax    = true;
var ajax_is_on      = false;
var session_user    = '<?php echo $_SESSION['user_name ']; ?>';//customize this as your need
var objHeight       = $(window).height() - 50; //customize this as your need
var user_name       = '<?php echo $this->uri->segment('2 '); ?>';//customize this as your need
var last_scroll_top = 0;

$(window).scroll(function(event) {

  var st = $(this).scrollTop();

  if (st <= last_scroll_top)
    return false;

  if (($(window).scrollTop() + 500) <= ($(document).height() - $(window).height()))
    return false

  var user_posts = '';

  if (!request_ajax || ajax_is_on)
    return false;

  ajax_is_on = true;
  $("#loading-gif").removeClass('hideGif')
                   .addClass('displayGif');

  $.ajax({

    url: base_url + 'controller/function/',
    data: {
      page_number: offset,
      user_name: user_name
    },
    type: 'POST',
    async: false,
    dataType: 'JSON',
    success: function(data) {

      $("#loading-gif").removeClass('displayGif').addClass('hideGif');

      if (data != '0') {

        for (var x = 0; x < data.length; x++) {

          user_posts +=
            '<div class="row-fluid">' +
            '<div class="span7" style="">';

          if (data[x].status != '1')
            user_posts += '<div class="label" style="">Unpublished</div>';
          else
            user_posts += '';

          user_posts += HTMLdesignWITHjqueryVARIABLES;
        }

        $('#infiniteContent').append(user_posts);

        offset += 1;

      } else {

        request_ajax = false;
        $("#message").addClass('alert alert-success');
        $("#pagination_message").html('No More Posts');
      }

      ajax_is_on = false;
    }
  });
  last_scroll_top = st;
});

EDITED

Here is the controller code:

function index() {

  $this->load->library('pagination');
  $this->load->model('menu_model');
  $category = '';

  $data['menu']           = $this->menu_model->get_menu();
  $data['count_posts']    = $this->post_model->count_active_posts();

  /* common configuration for pagination */
  $config['base_url']     = base_url() . 'home/index';
  $config['total_rows']   = $data['count_posts'];

  /* Pagination 1st column */
  $config['per_page'] = $data['per_page'] = 5;
  $offset             = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['posts'] = $this->post_model->get_first_column($config['per_page'], $config['offset'], $category);

  /* Pagination 2nd column */
  $config['per_page'] = $data['per_page'] = 3;
  $offset = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['all_posts'] = $this->post_model->get_second_column($config['per_page'], $config['offset'], $category);

  /* Pagination 3rd column */
  $config['per_page'] = $data['per_page'] = 2;
  $offset             = $this->uri->segment(3);
  if ($this->uri->segment(3) > 0) {
      $offset = $this->uri->segment(3) * $config['per_page'] - $config['per_page'];
  }
  $config['offset'] = $offset;
  $this->pagination->initialize($config);

  $data['new_posts'] = $this->post_model->get_third_column($config['per_page'], $config['offset'], $category);

  $this->load->view('home_view', $data);

}

Hope someone will need this someday.

Implementing Infinite Scrolling with jquery

1) Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files

Absolutely not. You do not need to generate static html pages beforehand, The only think you need is a URL scheme where subsequent page content can be fetched by changing one number in URL.

Think of it from the perspective of the infinite scroll plugin. You load the plugin JavaScript in your page #1 and provide link to page#2 inside page #1. Now when the user scrolls past page#1, the only variable that the plugin has is the current page number, like, 2, or 3 or 4 (N)

The plugin needs to create the URL to fetch content from when user is scrolling. So how does the plugin do that? The plugin looks at the next URL structure provided in page#1, parses it and creates a "base path" to which it will keep adding current_page_number to fetch subsequent content. That is the role of NAV selector.

So let's say I have something like /home/page/2 as next URL in page#1. The plugin will parse this into an array as

[/home/page/,2]

and think that base_path = "/home/page/"

when the plugin attempts to fetch page_number 3, it will just append 3 to the base path, like base_path.join(current_page_num) making it /home/page/3

On server side I can just have a controller that takes care of all the /home/page/1 to /home/page/N links. You can just look inside the plugin, look for _determinePath and retrieve functions.

Now you can see the problem as well. The problem is that there can be an infinite variety of URL structure depending on how you are doing pagination inside your code and how many variables do you need. My way of doing pagination is different from your way of doing pagination. Same holds for frameworks. Drupal pagination scheme may be different from Djanga and wordpress etc.

The plugin cannot possibly cope with all these URL structures. Given a next URL, it cannot possible always deduce the "base path" to which it needs to add current_page_number. Again look at _determinePath() method of plugin to see what kind of URL it can cope with. It can parse simple URL structures, like page2.html or page=2 but you have to provide your own implementation if your URL structure is complicated or something that the plugin cannot handle. Look at pathParse() method as well.

2)Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have.

Again, there is no need to create HTML files. You have two options to signal end of content (without knowing how many pictures you have in advance)

When you have reached the "no content condition" you can return an HTTP 404.
Or you can return an empty string.

Does this answer the question?

How it can work with the plugin

First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY
First page on load - use instagram pagination and store "nextURL" in your javascript somewhere
On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL
Override plugin content selector - so it returns new elements to callback
On Plugin fetch content - Use the callback inside plugin to update your page

Update on github repo

I have forked paul's github repo to add documentation for PHP server side integration. I believe that plugin's assumption that next URL is only dependent on current page number is too restrictive. We need to get nextURL from next page content.

Github Repo - https://github.com/rjha/infinite-scroll

Pull request on base repo - https://github.com/paulirish/infinite-scroll/pull/219

My javascript knowledge is very limited and maybe you can do a better job of extending the base plugin. However every drop helps make the ocean :)

JQuery Infinite Scroll - load more after max page limit reached

Try changing your code like this, so that you increment a counter each time you load content, and check that counter hasn't reached a certain value before adding more content.

var cLoaded = 0, iMyLoadLimit = 5;

    // Infinite Ajax Scroll configuration
    $container.infinitescroll({
        navSelector: "div.paginate",
        nextSelector: "div.paginate a",
        itemSelector: "div.element",
        maxPage: 5,
        loading: {
          finishedMsg: 'Load More',
          msgText: " ",
          img: 'public/img/ajax-loader.gif',
          finished: function(){
               alert('finished');
          }

        }
    },
    function(newElements) {
        if(cLoaded < iMyLoadLimit){

            var $newElements = $(newElements).css({opacity: 0});
            //remove the first item
            $newElements.splice(0, 1);

            $container.isotope('appended', $newElements);
        }
        cLoaded++;
    }

});