JSFiddle - React, Tailwind, and code Playground

by dhavaln

HTML

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<div data-role="page">
    <div id="header" data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div class="content-primary">    
            <ul data-role="listview" id="list">
            </ul>
        </div>
    </div><!-- /content -->
    
    <div id="footer" data-role="footer">
        <h1>My Footer</h1>
    </div><!-- /header -->

</div><!-- /page -->

JavaScript

// load test data initially
for (i=0; i < 20; i++) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview('refresh');


// load new data when reached at bottom
$('#footer').waypoint(function(a, b) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>"));
    $("#list").listview('refresh');
    $('#footer').waypoint({
        offset: '100%'
    });
}, {
    offset: '100%'
});