Load Data on page Scroll | Lessoncup Programming Blog

Tuesday, 31 December 2013

Load Data on page Scroll

Hi, today i am going to tell you about how to display the old posts while scrolling the window scroll bar, we haven seen many social network sites like Facebook, twitter and Google plus, now today some e-commerce and product related websites also adopting this feature, the advantage of this feature is we can display the old records as par page window scroll end and it will not effect on page loading time, when ever visitors scroll down the page old records will appear, i have done this feature using jquery and ajax, it is very simple just few lines of code.. let's see how will do this.


HTML

just include the ads.php file inside the UL tag, and take one DIV and give it class name more, the reason to take this DIV is while scroll the window to end the loader image will appear in this DIV and the results will append into UL tag
<div class="lessoncup">

<ul>
<?php
include('ads.php');
?>
</ul>

<div class="more"></div>
</div>

JAVASCRIPT

now this feature completely depends on Window Scroll, the logic is we need to write the code inside the $(window).scroll() method and we need to know the window height and document height by using $(window).height() and $(document).height() methods we can get the height easily, now if the window scroll top position value is equal to document.height - window.height values just get the last record ID and send the value to getad.php file using ajax request,  inside the ajax success function write the if condition for if we got server response we show the old records else just show the message of No more old posts
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 

 $(window).scroll(function(){
  
  var winheight = $(window).height();
 
 var docheight = $(document).height();
  
  if($(window).scrollTop()== docheight - winheight){
   
   var getLastID=$('li:last').attr('id');
  
  $('.more').fadeIn('slow').html('<img src="ajax-loader.gif" align="absmiddle">');

   $.ajax({
    
    type: "POST",
    url: "getad.php",
    data: "nextID="+getLastID,
    cache: false,
    success: function(msg){
     
     if(!msg){
      
      $('.more').html('No Old Posts');
     }else{
      
      $('ul').append(msg);
     $('.more').hide();
     
     }
     
    }
     
    
    });
   
   }
 
 });
     
});


</script>

ads.php

in this file just write the query and fetch the records inside the LI tag by using while loop and put the records limit to 5
<li style=" background-color:#f2f2f2; color:#666; height:auto; padding:5px; font-weight:bold;">Recommended Pages</li>

<?php

include('db.php');

extract($_REQUEST);

$news=mysql_query('select * from news order by nid desc limit 5');

while($full=mysql_fetch_array($news)){

?>

<li id="<?php echo $full['nid']?>">

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>

You and 215 other friends like this.

Lessoncup Programming BLog<br/>

Author &amp; Posted By Mohammad Khasim

</li>

<?php }?>

getad.php

in this file write the query to fetch the records, here the logic is simple i am using where condition in query to show the old records based on the previous last record ID nid<'$nextID', here the nid is database column id name and i am using Less Than Operator to compare the two values, if we found any Less Value in nid column from Greater Value of nextID, based on this algorithm the result will continue until to end of the records.
<?php

include('db.php');

extract($_REQUEST);

$news=mysql_query("select * from news where nid<'$nextID' order by nid desc limit 1");

while($full=mysql_fetch_array($news)){

?>

<li id="<?php echo $full['nid']?>">

<img src="icons/<?php echo $full['img']?>" align="top" />

<b><?php echo $full['news']?></b><br/>

You and 215 other friends like this.
Lessoncup Programming BLog<br/>

Author &amp; Posted By Mohammad Khasim

</li>

<?php }?>

Live Demo   Download Script

9 comments :

  1. Thx for great help :)
    But what would you do to prevent sendind more than one post when you scroll ?

    ReplyDelete
  2. this great help dude...
    ops... I don't know you're man or woman but it's great help
    thanks's a lot

    ReplyDelete
    Replies
    1. hii and thank you.. and i am Male you didn't seen my photo at right side top

      Delete
  3. can anyone give me help on doing my business facebook wall on my website.

    ReplyDelete
  4. Does'nt work. When i change this: " select * from news where nid<'$nextID' order by nid desc limit 1 " to this: " select * from musicas where id<'$nextID' order by id desc limit 1 " it just dont load anything more... What can i do?

    ReplyDelete
    Replies
    1. http://www.bravopropaganda.com/musicas2/ here is the exemple

      Delete
  5. Hi , Can You Tell me a tutorial how to connect my project which is in my local system www wamp server folder to server database. i want use to connect it through cpanel live server database..
    connct locat to server database..
    thanks..

    ReplyDelete
  6. try this control also

    http://www.sanwebcorner.com/2015/03/load-data-while-scroll-down.html

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons