Clever Geek Handbook

Jquery doesn't work with infinite scrolling

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

I am using a jQuery plug-in to do infinite scrolling on a webpage that will only display images. This plugin is located from Infinite Scrolling Images>. I have it mostly copy/paste

, but it doesn't work for some reason (sorry, I can't give you more details, but I'm not too deep in web development).

I am testing this demo in a virtual machine from osboxes.org . Linear machine (Ubuntu). I am using firefox altought right now I tried using Opera

or Google Chrome

to see if there was a problem with the browser but it is not.

I have tried the following questions without any results: Infinite scrollable jquery does not work

jQuery scroll to element

Freemasonry callback in jQuery infinite scroll does not work in Wordpress - and neither is infinite scroll plugin

Here is the jQuery part:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $(document).endlessScroll({
            inflowPixels: 300,
            callback: function() {
          var $img = $('#images li:nth-last-child(5)').clone();
          $('#images').append($img);
            }
        });
    });
</script>

Body

<h1>Infinite Scrolling, Demo 3</h1>

            <ul id="images">
                <li>
                    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
                        <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
                    </a>
                </li>
                <li>
                    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
                        <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
                    </a>
                </li>
                .... some more images (30 more) .....

Unfortunately, I cannot get the page to navigate infinite scroll

.

I tried this simple example from w3shool

and it works like a charm:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
+1


source to share


1 answer


Your violin is missing a main function endlessScroll

So, I updated your fiddle and added the appropriate 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: "<br />Loading...<br />",
      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("<div class=\"endless_scroll_inner_wrap\" />").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("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");

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

          if (data !== false) {
            $(options.insertAfter).after("<div id=\"endless_scroll_data\">" + data + "</div>");
            $("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("<div id=\"endless_scroll_marker\"></div>");
              // 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;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h1>Infinite Scrolling, Demo 3</h1>

<ul id="images">
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
</ul>
Run codeHide result


+1


source






More articles:


All Articles