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 !important;
}

JavaScript

/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */
(function($) {
    function getViewportHeight() {
        var height = window.innerHeight; // Safari, Opera
        var mode = document.compatMode;

        if ((mode || !$.support.boxModel)) { // IE, Gecko
            height = (mode == 'CSS1Compat') ? document.documentElement.clientHeight : // Standards
            document.body.clientHeight; // Quirks
        }

        return height;
    }

    $(window).scroll(function() {
        var vpH = getViewportHeight(),
            scrolltop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
            elems = [];

        // naughty, but this is how it knows which elements to check for
        $.each($.cache, function() {
            if (this.events && this.events.inview) {
                elems.push(this.handle.elem);
            }
        });

        if (elems.length) {
            $(elems).each(function() {
                var $el = $(this),
                    top = $el.offset().top,
                    height = $el.height(),
                    inview = $el.data('inview') || false;

                if (scrolltop > (top + height) || scrolltop + vpH < top) {
                    if (inview) {
                        $el.data('inview', false);
                        $el.trigger('inview', [false]);
                    }
                } else if (scrolltop < (top + height)) {
                    if (!inview) {
                        $el.data('inview', true);
                        $el.trigger('inview', [true]);
                    }
                }
            });
        }
    });

    // kick the event to pick up any elements already in view.
    // note however, this only works if the plugin is included after the elements are bound to 'inview'
    $(function() {
        $(window).scroll();
    });
})(jQuery);

$('div').bind('inview', function(event, visible)...