JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<meta charset=utf-8 />
<title>Test</title>
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <div id="scrollableContent">
        <div id="status" class="status">Running</div>
  </div>
</body>
</html>

CSS

body{
    font-family: 'Droid Sans', sans-serif;
  }
  
  #scrollableContent{
    border: 3px dotted black; 
    border-radius: .5em;
    padding: 0;
    spacing: 0;
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
  } 

.inner{
    width: 100%;
    background-color: #0064CD;
    height: 100px;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
    background-image: linear-gradient(top, #049cdb, #0064cd);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    padding:.3em;
    display: none;
}

.status{
    background-color : #BABABA;
    opacity:.4;
    filter:alpha(opacity=40);
    position: absolute;
    top:0;
    right:0;
    padding: 2px;
    border: 2px solid #BABABA;
}

.stop{
    border: 2px solid red;
}

JavaScript

$(document).ready(function(){
    (function(){
        var myDiv = $("#scrollableContent"),
            statusDiv = $("#status"),
            count = 0,
            timeoutID = "",
            stop = false;
        
        addContent();
      
        myDiv.mouseover(function(){
            clearTimeout(timeoutID);
            setStatus("Stopped");
        });
        
        myDiv.mouseleave(function(){
            if(!stop){
                addContent();
                setStatus("Running");
            }
        });
            
        
        myDiv.click(function(){
            if(stop){
                stop = false;
                addContent();
                setStatus("Running");
            }
            else{
                stop = true;
                setStatus("Stopped");
            }
            
            statusDiv.toggleClass("stop");

        });
        
        function setStatus(status){
            statusDiv.html(status);
        }
        
        function addContent(){
            var newDiv= $("<div class='inner'>New" + count + "</div>");
            myDiv.prepend(newDiv);
            newDiv.slideDown();
            
            count++;
            
            if(count === 200){
                clearTimeout(timeoutID);
                return;
            }
            timeoutID = setTimeout(addContent,2000);
        }
    }());
});