jquery not working with infinite scroll

Question

I'm new to jQuery and web developing but I'll do my best to give you the best damn question that you can ever have.

I'm using jQuery plug in to perform infinite scroll in a web-page that will only display images. This plugin is from Infinite Scrolling though images. I have basically copy/pastebut it's not working for some reason (I'm sorry I can't give you more details but I'm not too deep into web-developing).

I'm testing this demo in a virtual machine from osboxes.org. A linux machine (Ubuntu). I'm using right now firefox altought I tried using Opera or Google Chrome to see if it was some problem with the browser but it's not.

I have tried the following questions with no results: Infinite scrolling jquery not working

jQuery scroll to element

Masonry callback in jQuery infinite scroll isn't working in Wordpress - and neither are infinite scroll plugins

Here is the jQuery part:

Body:

Infinite Scrolling, Demo 3

            
                
                    
                        
                    
                
                
                    
                        
                    
                
                .... some more images (30 more) .....

Unfortunally I can't seem to make the page go infinite scroll.

I have tried this simple example from w3shool and it works like a charm:









This is a heading

This is a paragraph.
This is another paragraph.

EhsanT · Accepted Answer

You are missing the main function endlessScroll in your fiddle

So I updated your fiddle and added the respective function to it. You can find the new fiddle under this link

(function($) {

  $.fn.endlessScroll = function(options) {

    var defaults = {
      bottomPixels: 50,
      fireOnce: true,
      fireDelay: 150,
      loader: "
Loading...
",
      data: "",
      insertAfter: "div:last",
      resetCounter: function() {
        return false;
      },
      callback: function() {
        return true;
      },
      ceaseFire: function() {
        return false;
      }
    };

    var options = $.extend({}, defaults, options);

    var firing = true;
    var fired = false;
    var fireSequence = 0;

    if (options.ceaseFire.apply(this) === true) {
      firing = false;
    }

    if (firing === true) {
      $(this).scroll(function() {
        if (options.ceaseFire.apply(this) === true) {
          firing = false;
          return; // Scroll will still get called, but nothing will happen
        }

        if (this == document || this == window) {
          var is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels;
        } else {
          // calculates the actual height of the scrolling container
          var inner_wrap = $(".endless_scroll_inner_wrap", this);
          if (inner_wrap.length == 0) {
            inner_wrap = $(this).wrapInner("").find(".endless_scroll_inner_wrap");
          }
          var is_scrollable = inner_wrap.length > 0 &&
            (inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels);
        }

        if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) {
          if (options.resetCounter.apply(this) === true) fireSequence = 0;

          fired = true;
          fireSequence++;

          $(options.insertAfter).after("" + options.loader + "");

          data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;

          if (data !== false) {
            $(options.insertAfter).after("" + data + "");
            $("div#endless_scroll_data").hide().fadeIn();
            $("div#endless_scroll_data").removeAttr("id");

            options.callback.apply(this, [fireSequence]);

            if (options.fireDelay !== false || options.fireDelay !== 0) {
              $("body").after("");
              // slight delay for preventing event firing twice
              $("div#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() {
                $(this).remove();
                fired = false;
              });
            } else {
              fired = false;
            }
          }

          $("div#endless_scroll_loader").remove();
        }
      });
    }
  };

})(jQuery);

$(document).endlessScroll({
  inflowPixels: 300,
  callback: function() {
    var $img = $('#images li:nth-last-child(5)').clone();
    $('#images').append($img);
  }
});

body {
  margin: 0;
  background-color: #F0F0F0;
  font-family: 'Liberation Sans', Arial, sans-serif;
}

h1 {
  text-align: center;
}

#images {
  margin: 0 auto;
  padding: 0;
  width: 640px;
  list-style-type: none;
}


Infinite Scrolling, Demo 3

jquery not working with infinite scroll

Answers (1)

Related Questions