Tuesday, July 5, 2011

Source Code Release - Load After Scroll / ForeverScroll

The video



Also to note:
You could pass in a number into the load function and load different content, you don't always have to load the same thing over and over, that was just for the example.

<html>
<head>
 <style type="text/css">
  #flickr {
   height:600px;
   overflow-x:hidden;
   width:800px;
  }
  .flickr_results, .loading {
   padding:10px;
   border-radius:5px;
   background:#eee;
   color:#555;
   margin:10px;
   font-family:helvetica;
   font-size:11px;
   font-weight:bold;
  }
  .loading {
   background:#000;
   color:white;
  }
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
  
  var loading = true;
  
  function loadFlickr() {
   var url = "http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&photoset_id=72157619415192530&format=json&jsoncallback=?";
   $.getJSON(url, function(data) {
    var photos = data.photoset.photo;
    $.each(photos, function(i,photo) {
     var title = photo.title;
     $("#flickr").append("<div class='flickr_results'>"+title+"</div>");
    });
    
    // once we've loaded
    // kill the loading stuff
    loading = false;
    $(".loading").remove();
    
   });
  }
  
  $(function() {
   
   // load initial photos
   loadFlickr();
   
   // scroll event of the main div
   $("#flickr").scroll(function() {
   
    // get the max and current scroll
    var curScroll = $(this)[0].scrollTop;
    var maxScroll = $(this)[0].scrollHeight - $(this).height();
    
    // are we at the bottom?
    if( (curScroll == maxScroll) && loading == false) {
    
     // when you start, set loading
     loading = true;
    
     // add the loading box
     $("#flickr").append("<div class='loading'>Loading...</div>");
     
     // scroll to the bottom of the div
      $(this)[0].scrollTop = $(this)[0].scrollHeight - $(this).height();
     
     // load more photos
     loadFlickr();
    } 
   });  
   
  });
 </script>
</head>
<body>
 <div id="flickr">
 
 </div>
</body>
</html>

6 comments:

  1. Dude, i've learned a lot from you lately, ever since i discovered your youtube's videos I was hooked on some techniques you've showed us.

    Thanks a lot man, keep up the good work

    ReplyDelete
  2. Hey Sean, you obviously know a whole lot more than I do about this kind of stuff and I appreciate you sharing. I was wondering if you knew how to do this in conjunction in a php sql call instead flickers API? Any help you can give would be awesome.

    Thanks!

    ReplyDelete
    Replies
    1. Sure, instead of using $.getJSON to get the flickr API, you would use $.post and call your PHP page. There you would connect to your mysql database and load content. You would need to make sure to pass in your current row, so you could get constantly get NEW data from mysql, using the LIMIT clause.

      Delete
  3. Hey Sean,
    My $("#flickr").scroll(function() is never invoked while scrolling. Any ideas why?

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

    ReplyDelete