CODEWITHSUNDEEP
jqueryinfinite-scrolljquery-waypoints
Shantaram Tupe
Shantaram Tupe

Reputation: 1666

JQuery: Infinite (finite) scrolling on pre-loaded data

I have data and I have form Div Grid of 4 column each.

I want Infinite (finite) scrolling on pre-loaded data.

I want to show next Grid data after scroll down and reach to bottom of main div.

I don't want to do it with Ajax call I already have data and formed Div Grid.

Any Idea to do it with Waypoint Infinite Scroll ?

UPDATED :-

$(document).ready(function() {
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0]
  });
});

function MyFunction() {
  alert("HI");
  for (var i = 0; i < 5; ++i) {
    var div = "<div class='infinite-item'> <div class='square-box'> <div class='square-content'> test </div> </div> <div class='square-box'> <div class='square-content'> test test </div>";

  }
  return false;
}
.square-box {
  position: relative;
  width: 200px;
  overflow: hidden;
  background: #4679BD;
  display: inline-block;
}
.square-box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  text-align: center;
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <!DOCTYPE html >
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tutorials</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="infinite.js"></script>

  </head>

  <body>
    <div class="infinite-container">
      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 1
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 2
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 3
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 4
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 11
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 12
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 13
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 14
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 111
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 112
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 113
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 114
          </div>
        </div>
      </div>

      <div class="infinite-item">
        <div class='square-box'>
          <div class='square-content'>
            test 1111
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 2222
          </div>
        </div>
        <div class=' square-box'>
          <div class='square-content'>
            test 3333
          </div>
        </div>
        <div class='square-box'>
          <div class='square-content'>
            test 4444
          </div>
        </div>
      </div>
    </div>
    <a class="infinite-more-link" href="">More</a> 
    <!-- javascript:MyFunction(); return false; -->
  </body>
  <style type="text/css">
  </style>

  </html>

Thank you.

Upvotes: 1

Views: 605

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7103

Here you go. Also paste this code and put in different file (and don't forget to include in it). I also suggest to put all styles in separate file too. You also need to have test2.php (or however you want, but in that case you will need to update jQuery script at the bottom of code). It works because I tested:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tutorials</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery@*"></script>
<style type="text/css">
.square-box {
    position: relative;
    width: 200px;
    overflow: hidden;
    background: #4679BD;
    display: inline-block;
}
.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}
</style>
</head>

<body>
<div class="infinite-container">
  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 1
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 2
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 3
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 4
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 11
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 12
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 13
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 14
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 111
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 112
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 113
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 114
      </div>
    </div>
  </div>

  <div class="infinite-item">
    <div class='square-box'>
      <div class='square-content'>
        test 1111
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 2222
      </div>
    </div>
    <div class=' square-box'>
      <div class='square-content'>
        test 3333
      </div>
    </div>
    <div class='square-box'>
      <div class='square-content'>
        test 4444
      </div>
    </div>
  </div>
</div>
<nav id="pagination">
    <p><a class="infinite-more-link" href="test2.php">More</a></p>
</nav>

 <script>
$(document).ready(function()
{
    var win = $(window);

    // Each time the user scrolls
    win.scroll(function()
    {
        if ($(document).height() - win.height() == win.scrollTop()) {

            $.ajax({
                url: 'test2.php',
                dataType: 'html',
                success: function(html) {
                    $('.infinite-container').append(html);
                }
            });
        }
    });
});
</script>

</html>

Upvotes: 1

Related Questions