Thursday, 18 April 2013


Load Content While Scrolling Page using JQuery

We generally have lots of content to present but can not load all of it at once as it may take too long.

This Ajax auto content loading can very be handy in almost every project.

When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content.

<html>
 <head>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
 <script>
  var scrollInAction = false;
  $(window).scroll(function(){
   console.log($(window).scrollTop() >= ($(document).height() - $(window).height() - 200));
      if  ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)){
       
       if (scrollInAction)
          {
           return false;
          }else
          {
        scrollInAction=true;
           //do stuff // load of more content here
           yourFunction();

//           scrollInAction=false; // TODO: PUT this scrollInAction=false after ajax loading is completed.
          }
      }
  });
  var index = 0 ;
  function yourFunction(){
   // AJAX Data Loading Logic
   $("#lisitingDiv").append("<div id='subDiv' name='subDiv'><label>Index " + index + "</label></div>");
   $("#lisitingDiv").append("<br/>");
   index = index + 1 ;

   if(index > 500) // 500 is limit after which auto scrolling will be disabled...
   {
    scrollInAction=true;
   }else
   { 
    scrollInAction=false;
   }
  }

  function onLoad(){
   for(i=0;i<25;i++)
   {
    yourFunction();  
   }
  }
 </script>
 <style>
  label {
      -moz-border-bottom-colors: none;
      -moz-border-left-colors: none;
      -moz-border-right-colors: none;
      -moz-border-top-colors: none;
      background-color: #FFFFEC;
      border-color: #EEEECC;
      border-image: none;
      border-style: solid;
      border-width: 0 1px;
      color: #000000;
      font-size: 100%;
      margin: 0;
      padding: 0.25em 27px;
      display: block;
      text-decoration: none;
  }
  #subDiv{
   margin: 3px auto;
      position: relative;
      width: 720px;
  }
 </style>
 </head>
 <body onload="onLoad()">
  <p style="position: fixed;">
   Scroll Down.....
   <br>
   It will scroll till Index 500.
  </p>
     <div id="lisitingDiv" name="lisitingDiv">
     </div>
 </body>
</html>
It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.

7 comments:

  1. You can view this behavior in the facebook and twitter websites. Login to your facebook or twitter account and press End key on your keyboard. You will be able to view the loader as shown in the image.

    https://plus.google.com/108400481090161300810/posts/gR5VgZiDudr

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

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

    ReplyDelete
  4. Our software is not really advisable to use if you want to create quality content for your site; if you cannot afford to use a service offered by companies or freelancers who write quality content, you can still try and start to write articles on your own. spin rewriter review

    ReplyDelete
  5. Thanks for sharing this post. Visit also this source to learn more about apps to spy on facebook.

    ReplyDelete
  6. It's awesome designed for me to have a web page, which is helpful designed for my know-how. thanks admin paypal login

    ReplyDelete

Find me on Facebook! Follow me on Twitter!