JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<link rel="stylesheet" href="http://www.jquery4u.com/demos/infinite-scrolling-demo1/css/style.css">
<script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.infinitescroll.min.js"></script>
<script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.masonry.min.js"></script>

<div class="demos">

  <!-- BuySellAds Zone Code -->
<div id="bsap_1285666" class="bsarocks bsap_ea957971a5e1fed9f25dd8e7a8b9f59e"></div>
<!-- End BuySellAds Zone Code -->

<div style="display:inline-block;width:100%;padding:10px;background-color:#FFFFFF">
<a href="http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/">< Back to tutorial page</a>
</div>

  <section id="content">

      <h1>Infinite Scroll Demo 1</h1>

<div id="container" class="transitions-enabled infinite-scroll clearfix">

  <div class="box col3">
    <p>
      <a href="http://www.flickr.com/photos/nemoorange/3318887645/" title="Clarendon Metro by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3619/3318887645_1f33364338.jpg" alt="Clarendon Metro"  /></a>
    </p>
  </div>

  <div class="box col1">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
  </div>

  <div class="box col2">
    <p>
      <a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" /></a>
    </p>
  </div>


  <div class="box col1">
    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
  </div>

  <div class="box col1">
    <h2>Sit amet mi ullamcorper vehicula</h2>
  </div>

  <div class="box col1">
    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
  </div>

  <div class="box col5">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut...

JavaScript

$(document).ready(function()
    {
          //empty top search box on click
          var searchboxEl = $('#searchform input[name=q]'),
              defaultText1 = 'eg. Ajax demos';
          searchboxEl.attr('value',defaultText1);
          searchboxEl.live('click', function()
          {
              searchboxEl.val('');
              searchboxEl.focus();
          }).live('blur', function()
          {
              searchboxEl.val(defaultText1);
          });


          //BSA
          setTimeout(function()
          {
              var close = '<a href="#" class="close_bsap">X</a>';
              $('.bsap .bsa_it').prepend(close);
              $('.close_bsap').live('click', function(e)
              {
                  e.preventDefault();
                  $(this).closest('.bsap').hide();
              });
          }, 1500);

    });