A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.
JavaScript CSS HTML
Latest commit 033bcb2 Jul 30, 2016 @DDKnoll committed on GitHub Create privacy_policy.md
Failed to load latest commit information.
css Updated mobile CSS May 16, 2014
font Added icons and minor aesthetic improvements. May 13, 2014
js user search should now work. Jun 9, 2014
templates Adding better documentation May 14, 2014
test user search should now work. Jun 9, 2014
About-Ractive.md getting documentation ready for presentation May 14, 2014
README.md adding functionality for searching by user id, location, and popular. May 20, 2014
privacy_policy.md Create privacy_policy.md Jul 30, 2016
search.md adding functionality for searching by user id, location, and popular. May 20, 2014


Instagram Infinite Scroll


Instagram Infinite Feed

The Instagram feed uses Ractive to render a mustache html template with instagram image data.

How to Use:

  1. Create an instagram developer account and Client ID for your application.
  2. Include the Ractive.js and instagram.js scripts.
  3. Create a mustache template.
  4. Pass the Client ID, hashtag to search, and template string into the instagramFeed constructor.

Example Template:

<!-- This loops over the data -->
    <div class="insta-image">
        <img src="{{instagramData.data[index].images.standard_resolution.url}}" alt="" />

Sample Usage:

<script src="js/ractive/Ractive-legacy.0.3.9.min.js"></script><!-- Get Ractive-->
<script src="js/instagram.js"></script> <!-- Get Instagram extension -->
//Check URL for search parameter.
query = (window.location.search.length ? window.location.search.slice(1) : 'dribbble');

//Infinite Scroll Window Bindings.
var infiniteScrollBinding = function(){

    //Calculate Window Values on every scroll event.
    var bod = $('body')[0];
    pageHeight = bod.offsetHeight;
    bottomScroll = window.scrollY + bod.clientHeight;
    distanceToBottom = pageHeight - bottomScroll;

    //Load more posts as needed.
    if(distanceToBottom < 200){
    else if(window.scrollY <= 0){

// Get our template file.
$.get( 'templates/twitter-feed.rac').then( function ( template ) {

  //Create New Instagram Feed
  insta = new instagramFeed({
    el: 'template-target',
    template: template,
    clientID: 'Your Instagram Client ID',
    hashtag: query,
    complete: infiniteScrollBinding


Function Reference

insta.load('replace'); // Replace the current data (Reload)
insta.load('before');  // Check for newer posts
insta.load('after');   // Load Older Posts
insta.set('search', 'yolo'); //Set Value of Search
insta.get() //Inspect the Data


  1. Minify JS
  2. Generate more query urls (search users, locations, etc.)
  3. Finish Documentation
  4. Develop Testing Framework