RefreshNewsSimple

emulate refresh news

by bsorrentino

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.woff"></script>
<div class="news">
<div id="icon" style="display:block">    
<i class="fa fa-cog fa-spin"></i>
</div>
<div id="count" class="lastnews-count" style="display:none" >13</div>
<div class="label">news</div>    
</div>

CSS

.news {
    width: 40px;
    text-align:center;
    background-color: #1691b3;
    color: #fff;

}

.lastnews-count {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'FuturaStdBook', sans-serif;
    vertical-align: middle;
}

.label {
    font-size: 12px;    
}

JavaScript

var icon = document.getElementById("icon");
var count = document.getElementById("count");

count.style['line-height'] = count.style.height = "" + icon.offsetHeight + "px";

setInterval( function() {
    
    count.style.display = (count.style.display==="none") ? "block" : "none";
    icon.style.display = (icon.style.display==="none") ? "block" : "none";
    
    
}, 3000 );