JSFiddle - React, Tailwind, and code Playground

by tara_irvine

HTML

<div class="blog-container">
  <div class="wrapper clear">
    <div class="post-list"> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://farrow.uwpistol.net/RSSRetrieve.aspx?ID=5964&amp;Type=RSS20"><div id="catblogoutput"><div class="blog-post"><h2 class="post-title"></h2><div class="post-body"><p class="post-header">The NEW area allows us to show new work faster as well as going in to more depth if we choose to. We will update this area on a regular basis, not just with new work but also with older pieces and photographs which we think are relevant. You can also subscribe via the RSS feed should you wish to be updated automatically.</p></div><div class="contents"></div></div>

<div class="blog-post">
  <h2 class="post-title"> <a href="/_blog/Blog/post/Chan1/" title="Chan">Chan</a> </h2>
  <div class="post-year">2011</div>
  <div class="post-body"><h2>Chan</h2>
<h3>Congratulations to Andy Martin Studio who have won Best Lighting in the prestigious Bar and Restaurant Awards, for Chan in Thessaloniki, Greece. Farrow designed the graphic scheme for the lighting, so forgive us if we bathe in the light too.</h3>
<a href="http://farrow.underwaterpistol.com/wp-content/uploads/2011/07/Chan-Lights.jpg"><img width="650" height="423" alt="Chan Lights" src="http://farrow.underwaterpistol.com/wp-content/uploads/2011/07/Chan-Lights.jpg" title="Chan Lights" style="border: 0pt none;" class="alignnone size-full wp-image-1298"></a>
</div>
</div>



<div class="blog-post">
  <h2 class="post-title"> <a href="/_blog/Blog/post/molton-brown/" title="Molton Brown">Molton Brown</a> </h2>
  <div class="post-year">2011</div>
  <div class="post-body"><h2>Molton Brown</h2>
<h3>New logo and mark for Molton Brown.</h3>
<a href="http://farrow.underwaterpistol.com/wp-content/uploads/2011/06/MB-Blog-11.jpg"><img width="650" height="500" class="alignnone size-full wp-image-1287" title="MB Blog 1"...

CSS

.blog-container .blog-post{
    width: 611px;
    margin-bottom: 0;
    float: none;
    height: auto !important;
    position: relative;
    visibility:hidden;
}
img{
    width: 404px;
    margin-bottom: 10px;
    height: auto;
    display: block;
    max-width: 404px;
    max-height: none !important;
}
.post-body{
    width: 404px;
    float: right;
    border-top: 1px solid white;
    padding-top: 10px;
}
h2.post-title{
    border-top: 1px solid white;
    margin-bottom: 10px;
    display: block;
    position: relative;
    float: left;
    width: 197px;
    padding-top: 10px;
    margin-right: 10px;
}
.post-year, .side-panel {
display: none;
}
.visible{
    visibility:visible;
}

JavaScript

/*
 * jQuery.appear
 * http://code.google.com/p/jquery-appear/
 *
 * Copyright (c) 2009 Michael Hixson
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
*/
(function($) {
  
  $.fn.appear = function(fn, options) {
    
    var settings = $.extend({

      //arbitrary data to pass to fn
      data: undefined,

      //call fn only on the first appear?
      one: true 
      
    }, options);
    
    return this.each(function() {
    
      var t = $(this);
      
      //whether the element is currently visible
      t.appeared = false;
      
      if (!fn) {

        //trigger the custom event
        t.trigger('appear', settings.data);
        return;
      }
      
      var w = $(window);
      
      //fires the appear event when appropriate
      var check = function() {

        //is the element hidden?
        if (!t.is(':visible')) {
          
          //it became hidden
          t.appeared = false;
          return;
        }

        //is the element inside the visible window?
        var a = w.scrollLeft();
        var b = w.scrollTop();
        var o = t.offset();
        var x = o.left;
        var y = o.top;
        
        if (y + t.height() >= b && 
            y <= b + w.height() &&
            x + t.width() >= a && 
            x <= a + w.width()) {

          //trigger the custom event
          if (!t.appeared) t.trigger('appear', settings.data);
          
        } else {

          //it scrolled out of view
          t.appeared = false;
        }
      };

      //create a modified fn with some additional logic
      var modifiedFn = function() {
        
        //mark the element as visible
        t.appeared = true;

        //is this supposed to happen only once?
        if (settings.one) {

          //remove the check
          w.unbind('scroll', check);
          var i = $.inArray(check, $.fn.appear.checks);
          if (i >= 0) $.fn.appear.checks.splice(i, 1);
        }

        //trigger...