JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<input type="button" id="btn" value="click" />
</br>
<ul class="updateList">
    <li class="box isNew" >
 <div>
       <div class="date" >2013-03-14 14:10:26</div>
        <div class="name" >O utilizador VP Consulting adicionou uma equipa "0123.SPEC.TaskMgr.R123.xls"</div>
        
    </div>
    </li>
    <li class="box isNew" >
        <div class="date" >2013-03-14 14:10:26</div>
        <div class="name" >O utilizador VP Consulting adicionou um novo ficheiro "0123.SPEC.TaskMgr.R123.xls"</div>
    </li>
    <li class="box" >
        <div>
       <div class="date" >2013-03-14 14:10:26</div>
        <div class="name" >O utilizador VP Consulting adicionou uma equipa</div>
        </div>
    </li>
    <li class="box" >
        <div class="date" >2013-03-14 14:10:26</div>
        <div class="name" >O utilizador VP Consulting adicionou um novo ficheiro "0123.SPEC.TaskMgr.R123.xls"</div>
    </li>
    <li class="box" >
        <div class="date" >2013-03-14 14:10:26</div>
        <div class="name" >O utilizador VP Consulting adicionou um novo ficheiro "0123.SPEC.TaskMgr.R123.xls"</div>
    </li>
    <li class="box" >
        <div class="date" >2013-03-14 14:10:26</div>
       <div class="name" >O utilizador VP Consulting adicionou um novo ficheiro "0123.SPEC.TaskMg r.R123.xls"</div>
    </li>
</ul>

CSS

html{font-family:Helvetica;}

ul.updateList{ 
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.box {  display:block; margin-bottom:5px; width:90%;  border: solid 1px #888; margin-left:auto; margin-right:auto; background:#ededed; }


.box.isNew{display:none;}
/*
.box > div{padding:1px; display:block;}*/
.box .date{background:#CCC; font-size:10px; padding:1px 2px; width:110px; text-align:center;  border-bottom: 1px #888 solid; border-right: 1px #888 solid;
   font-weight:bold; color:#222; clear:right;
}

.box .name { font-size:12px; padding:4px; clear:left; color:#444;}

.box .icon { float:left; widht:20px; clear:left;}

JavaScript

$(document).ready(function(){
    // code here
});


function animateLastUpdates()
{
    var count = $("li.box.isNew").size()-1;
    
    $("li.box.isNew").each(function(i){
        $(this).delay((count-i) * 500).slideDown("fast").delay(100).effect("highlight", {}, 3000);
    });
}


$("#btn").click(function(){

    animateLastUpdates();
    
});