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:hidden;
}

JavaScript

/*
 * Viewport - jQuery selectors for finding elements in viewport
 *
 * Copyright (c) 2008-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *  http://www.appelsiini.net/projects/viewport
 *
 */
(function($) {
    
    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height() - settings.threshold;
    };
    
    $.rightofscreen = function(element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };
    
    $.leftofscreen = function(element, settings) {
        var left = $(window).scrollLeft();
        return left >= $(element).offset().left + $(element).width() - settings.threshold;
    };
    
    $.inviewport = function(element, settings) {
        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };
    
    $.extend($.expr[':'], {
        "below-the-fold": function(a, i, m) {
            return $.belowthefold(a, {threshold : 0});
        },
        "above-the-top": function(a, i, m) {
            return $.abovethetop(a, {threshold : 0});
        },
        "left-of-screen": function(a, i, m) {
            return $.leftofscreen(a, {threshold : 0});
        },
        "right-of-screen": function(a, i, m) {
            return $.rightofscreen(a, {threshold : 0});
        },
        "in-viewport": function(a, i, m) {
            return $.inviewport(a, {threshold : 0});
        }
    });

    
})(jQuery);

$(function() {
    var previous = "";
    $(window).bind("scroll", function(event) {
...