JSFiddle - React, Tailwind, and code Playground

by mamezito

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1722364/jsfiddle.css">
<h1>Going all-in: Ars interviews Microsoft's Steve Ballmer</h1><p>Microsoft  CEO Steve Ballmer is something of a polarizing figure. His loud,  bombastic style on stage stands in stark contrast to the generally more  reserved demeanours of other CEOs, and his tendency to gloss over what  he sees as irrelevant detail with a cavalier "blah blah blah" rubs many  the wrong way. Even after thirty years at Microsoft, Ballmer is nothing  if not enthusiastic about the company and the work it does, and  sometimes that enthusiasm boils over.</p>

<p>The contrast is particularly striking when we look at Apple. Though there are certainly similarities between Jobs and Ballmer&mdash;neither  CEO is a straight-laced, buttoned-down, ordinary businessman, both have  high-profile public images and personas, and both, apparently, have  tempers&mdash;Steve Jobs is seen as almost the diametric opposite of Steve Ballmer. Steve Jobs does go <a href="http://arstechnica.com/apple/news/2010/10/steve-jobs-drops-by-apple-earnings-call-to-take-jabs-at-competition.ars">off the reservation</a> from time to time, but his manner is orderly, precise, and controlled.</p>        

<p>The  different characters of the two men lead to very different perceptions  in the media and beyond. When Steve Jobs makes an absurd pronouncement&mdash;for example, his recent (and thoroughly dishonest) claim that Apple's Facetime is "<a href="http://link.brightcove.com/services/player/bcpid653175093001?bctid=666070939001">the first video calling on mobile devices</a>"&mdash;he's  almost allowed to get away with it. It's just part of the Reality  Distortion Field, the aura of marketing spin (and occasionally outright  deceit) that surrounds the man. Rather than criticizing that the guy is  living in a fantasy land, it's just attributed to the strength of his  vision and belief in the company's products.</p>

<p>On the other hand, when Steve...

CSS

body {
    width: 300px;
    margin: 0 auto;
}

textarea {
    width: 292px;
    height: 200px;
    margin-top: 20px;
    padding: 4px;
}

p {
    height:2900px;
    line-height: 1.6em;
    margin-bottom: 1em;
}

JavaScript

var $sections = $('p');
var curr = -1;

$(document).keydown(function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        prev = (curr < 0) ? $sections.length - 1 : curr - 1;
        next = (curr >= $sections.length - 1) ? -1 : curr + 1;

        switch (e.keyCode) {
        case 38:
            // up key
            s = $sections.eq(prev).offset().top;
            curr = prev;
            break;
        case 40:
            // down key
            s = $sections.eq(next).offset().top;
            curr = next;
            break;
        default:
            break;
        }

        if (curr == -1) {
            $('html, body').animate({
                scrollTop: 0
            }, 'slow');
        }
        else if (curr == $sections.length) {
            $('html, body').animate({
                scrollTop: 0
            }, 'slow');
        } else {
            $('html, body').animate({
                scrollTop: s
            }, 'slow');
        }
    
        return false;
    }
});