3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Do you know how to do infinite scroll on multiple pages?

by man5
2 replies
Check out this script.

“Infinite” Scroll to Load More Content Pagination with jQuery | InsertHTML


It works great. However, it has 1 query that retrieves data from the database and it works the same on all pages.

Is there a way I can use multiple different queries and use them for separate pages and still maintain the infinite scroll?
#infinite #multiple #pages #scroll
  • Profile picture of the author man5
    *UPDATE*

    Below are the pages samples I've created. I think now it should be easier to understand what I am talking about. Again, the infinite scroll is based on this "Infinite" Scroll to Load More Content Pagination with jQuery | InsertHTML

    And what I am looking to do is, apply the infinite scroll across multiple pages with different DB queries. To do that, it requires page parameters and I need help setting that up.

    Also @ = $ in the code below.

    index.php
    PHP Code:
    <?php
           @hostname='127.0.0.1'; @username='root'; @password='';   @dbh = new PDO("mysql:host=@hostname;dbname=cave",@username,@password); ?>   <!DOCTYPE HTML> <head> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script src="javascript.js"></script> <script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script>   @(document).ready(function() {   @('#content').scrollPagination({   nop     : 4, // The number of posts per scroll to be loaded offset  : 0, // Initial offset, begins at 0 in this case error   : 'No More Posts!', // When the user reaches the end this is the message that is // displayed. You can change this if you want. delay   : 500, // When you scroll down the posts will load after a delayed amount of time.   // This is mainly for usability concerns. You can alter this as you see fit scroll  : true // The main bit, if set to false posts will not load as the user scrolls.    // but will still load if the user clicks.   });   });   </script> <style>   h1 { font-size: 50px; }   </style> </head>   <body>   <div id="content"> </div>     </body> </html>



    ajax.php
    PHP Code:
    <?php
         @hostname='127.0.0.1'; @username='root'; @password='';   @dbh = new PDO("mysql:host=@hostname;dbname=cave",@username,@password);   @offset = is_numeric(@_POST['offset']) ? @_POST['offset'] : die(); @postnumbers = is_numeric(@_POST['number']) ? @_POST['number'] : die();     @getPosts = @dbh->prepare("SELECT * FROM posts ORDER BY id DESC LIMIT ".@postnumbers." OFFSET ".); @getPosts->execute(); @post = @getPosts->fetchAll();   if(count(@post) > 0) { foreach(@post as @row) {   @title = @row['title'];  @post = @row['post'];   ?> <h1><?php echo @title ?></h1> <h3><?php echo @post ?></h3> <?php }  } ?>


    javascript.php
    PHP Code:

    (function(@) {      @.fn.scrollPagination = function(options) {                  var settings = {              nop     : 4, // The number of posts per scroll to be loaded             offset  : 0, // Initial offset, begins at 0 in this case             error   : 'No More Posts!', // When the user reaches the end this is the message that is                                         // displayed. You can change this if you want.             delay   : 500, // When you scroll down the posts will load after a delayed amount of time.                            // This is mainly for usability concerns. You can alter this as you see fit             scroll  : true // The main bit, if set to false posts will not load as the user scrolls.                             // but will still load if the user clicks.         }                  // Extend the options so they work with the plugin         if(options) {             $.extend(settings, options);         }                  // For each so that we keep chainability.         return this.each(function() {                                  // Some variables              @this = @(this);             @settings = settings;             var offset = .offset;             var busy = false; // Checks if the scroll action is happening                                // so we don't run it multiple times                          // Custom messages based on settings             if(.scroll == true) @initmessage = 'Scroll for more or click here';             else  = 'Click for more';                          // Append custom messages and extra UI             @this.append('<div class="content"></div><div class="loading-bar">'++'</div>');                          function getData() {                                  // Post data to ajax.php                 @.post('ajax.php?page=' + page, {                                              action        : 'scrollpagination',                     number        : .nop,                     offset        : offset,                                          }, function(data) {                                              // Change loading bar content (it may have been altered)                     @this.find('.loading-bar').html(@initmessage);                                              // If there is no data returned, there are no more posts to be shown. Show error                     if(data == "") {                          .find('.loading-bar').html(.error);                         }                     else {                                                  // Offset increases                         offset = offset+.nop;                                                       // Append the data to the content div                            .find('.content').append(data);                                                  // No longer busy!                             busy = false;                     }                                              });                                  }                              getData(); // Run function initially                          // If scrolling is enabled             if(@settings.scroll == true) {                 // .. and the user is scrolling                 @(window).scroll(function() {                                          // Check the user is at the bottom of the element                     if(@(window).scrollTop() + @(window).height() > @this.height() && !busy) {                                                  // Now we are working, so busy is true                         busy = true;                                                  // Tell the user we're loading posts                         @this.find('.loading-bar').html('Loading Posts');                                                  // Run the function to fetch the data inside a delay                         // This is useful if you have content in a footer you                         // want the user to see.                         setTimeout(function() {                                                          getData();                                                      }, @settings.delay);                                                  }                     });             }                          // Also content can be loaded by clicking the loading bar/             @this.find('.loading-bar').click(function() {                              if(busy == false) {                     busy = true;                     getData();                 }                          });                      });     }  })(jQuery); 
    Signature
    www.imdabest.ca
    {{ DiscussionBoard.errors[9030043].message }}
    • Profile picture of the author man5
      Weird how the code windows are showing up.

      Here is the raw code.

      index.php

      <?php

      $hostname='127.0.0.1';
      $username='root';
      $password='';

      $dbh = new PDO("mysql:host=$hostname;dbname=cave",$username,$ password);
      ?>

      <!DOCTYPE HTML>
      <head>
      <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
      <script src="javascript.js"></script>
      <script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script>
      <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
      <script>

      $(document).ready(function() {

      $('#content').scrollPagination({

      nop : 4, // The number of posts per scroll to be loaded
      offset : 0, // Initial offset, begins at 0 in this case
      error : 'No More Posts!', // When the user reaches the end this is the message that is
      // displayed. You can change this if you want.
      delay : 500, // When you scroll down the posts will load after a delayed amount of time.
      // This is mainly for usability concerns. You can alter this as you see fit
      scroll : true // The main bit, if set to false posts will not load as the user scrolls.
      // but will still load if the user clicks.

      });

      });

      </script>
      <style>

      h1 {
      font-size: 50px;
      }

      </style>
      </head>

      <body>

      <div id="content"> </div>


      </body>
      </html>




      ajax.php

      <?php
      $hostname='127.0.0.1';
      $username='root';
      $password='';

      $dbh = new PDO("mysql:host=$hostname;dbname=cave",$username,$ password);

      $offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
      $postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();


      $getPosts = $dbh->prepare("SELECT * FROM posts ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);
      $getPosts->execute();
      $post = $getPosts->fetchAll();

      if(count($post) > 0) {
      foreach($post as $row) {

      $title = $row['title'];
      $post = $row['post'];

      ?>
      <h1><?php echo $title ?></h1>
      <h3><?php echo $post ?></h3>
      <?php
      }
      }
      ?>




      javascript.php
      (function($) { $.fn.scrollPagination = function(options) { var settings = { nop : 4, // The number of posts per scroll to be loaded offset : 0, // Initial offset, begins at 0 in this case error : 'No More Posts!', // When the user reaches the end this is the message that is // displayed. You can change this if you want. delay : 500, // When you scroll down the posts will load after a delayed amount of time. // This is mainly for usability concerns. You can alter this as you see fit scroll : true // The main bit, if set to false posts will not load as the user scrolls. // but will still load if the user clicks. } // Extend the options so they work with the plugin if(options) { $.extend(settings, options); } // For each so that we keep chainability. return this.each(function() { // Some variables = $(this); = settings; var offset = .offset; var busy = false; // Checks if the scroll action is happening // so we don't run it multiple times // Custom messages based on settings if(.scroll == true) = 'Scroll for more or click here'; else = 'Click for more'; // Append custom messages and extra UI .append('<div class="content"></div><div class="loading-bar">'++'</div>'); function getData() { // Post data to ajax.php $.post('ajax.php?page=' + page, { action : 'scrollpagination', number : .nop, offset : offset, }, function(data) { // Change loading bar content (it may have been altered) .find('.loading-bar').html(); // If there is no data returned, there are no more posts to be shown. Show error if(data == "") { .find('.loading-bar').html(.error); } else { // Offset increases offset = offset+.nop; // Append the data to the content div .find('.content').append(data); // No longer busy! busy = false; } }); } getData(); // Run function initially // If scrolling is enabled if(.scroll == true) { // .. and the user is scrolling $(window).scroll(function() { // Check the user is at the bottom of the element if($(window).scrollTop() + $(window).height() > .height() && !busy) { // Now we are working, so busy is true busy = true; // Tell the user we're loading posts .find('.loading-bar').html('Loading Posts'); // Run the function to fetch the data inside a delay // This is useful if you have content in a footer you // want the user to see. setTimeout(function() { getData(); }, .delay); } }); } // Also content can be loaded by clicking the loading bar/ .find('.loading-bar').click(function() { if(busy == false) { busy = true; getData(); } }); }); }
      Signature
      www.imdabest.ca
      {{ DiscussionBoard.errors[9030054].message }}

Trending Topics