JSFiddle - React, Tailwind, and code Playground

by Robin C Samuel

HTML

<!DOCTYPE html>
<html>      
    <head>      
        <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>        
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head>   
    <body>              
        <div data-role="page" id="page1">      
            <div data-role="header">         
                <h1>
                    Page 1
                </h1>     
            </div><!-- /header -->      
            
            <div data-role="content">                
                <br />
                <ul data-role="listview" id="resultListView">
                    <li>Item 1</li>
                    <li>Thing 2</li>
                    <li>What next 3</li>
                    <li>Another item 4</li>
                    <li>Item 5</li>
                    <li>Thing 6</li>
                    <li>What next 7</li>
                    <li>Another item 8</li>
                    <li>Item 9</li>
                    <li>Thing 10</li>
                    <li>What next 11</li>
                    <li>Another item 12</li>
<li>Item 1</li>
                    <li>Thing 2</li>
                    <li>What next 3</li>
                    <li>Another item 4</li>
                    <li>Item 5</li>
                    <li>Thing 6</li>
                    <li>What next 7</li>
                    <li>Another item 8</li>
                    <li>Item 9</li>
                    <li>Thing 10</li>
                    <li>What next 11</li>
                    <li>Another item 12</li><li>Item 1</li>
                    <li>Thing 2</li>
                    <li>What next 3</li>
                    <li>Another item 4</li>
                    <li>Item 5</li>
                    <li>Thing 6</li>
                    <li>What next...

JavaScript

$(document).ready(function() {
    var eventsElement = $('#resultListView');
    $(window).bind('scrollstop', function() {
        if ($(window).scrollTop() > $('#page1').height() - 500) {
            eventsElement.append('<li><a href="">Stop</a></li>');
            eventsElement.listview('refresh');
        }
    });

});