Skip to content

Instantly share code, notes, and snippets.

@stevoPerisic

stevoPerisic/index.html

Last active December 14, 2015 02:39
Show Gist options
  • Save stevoPerisic/5014847 to your computer and use it in GitHub Desktop.
Save stevoPerisic/5014847 to your computer and use it in GitHub Desktop.
Download ZIP
simple infinite loop data ticker
Raw
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Ticker</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<h2>Data Ticker</h2>
<div class="awardsScroller">
<ul>
<li>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="caption">Phasellus libero dolorr</p>
</div>
</li>
<li>
<div>
<p>Sed faucibus, odio aliquet dapibus facilisis, risus augue blandit diam, ut luctus elit magna at erat.</p>
<p class="caption">Donec viverra, ligula quis dignissim</p>
</div>
</li>
<li>
<div>
<p>Etiam vel varius erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p class="caption">Aliquam erat volutpat.</p>
</div>
</li>
<li>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris auctor aliquet nisi, eget feugiat velit tristique id.</p>
<p class="caption">Proin massa diam, imperdiet nec</p>
</div>
</li>
<li>
<div>
<p>Morbi ac leo odio. Ut consequat, risus sed pellentesque imperdiet, libero magna lacinia nulla, et volutpat sem nisi non mi. Mauris a ultrices justo.</p>
<p class="caption">Aliquam erat volutpat.</p>
</div>
</li>
<li>
<div>
<p>Nullam blandit tristique mollis. Sed tincidunt nulla vitae tortor commodo non varius diam rhoncus. Proin sagittis aliquam metus vulputate euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="caption">Cras bibendum congue</p>
</div>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="ticker.js"></script>
<script type="text/javascript">
$(function(){
var myTicker = new theTicker($('.awardsScroller'));
});
</script>
</body>
</html>
Raw
style.css
body{
font-family:Verdana, Geneva, sans-serif;
}
.caption{
font-size:10px;
font-style:italic;
}
.awardsScroller {
position:relative;
background:green;
color:#fff;
height:200px;
overflow:hidden;
}
.awardsScroller ul {
display:block;
width:100%;
position:absolute;
top:0;
left:0;
list-style:none;
margin:0 !important;
padding:0;
}
.awardsScroller ul li {
display:block;
margin:0;
}
.awardsScroller ul li div {
padding:10px 15px;
border-bottom:1px solid rgba(255, 255, 255, .5);
}
.awardsScroller ul li p {
margin:0 0 5px 0;
}
Raw
ticker.js
function theTicker(el){
var list = el.find('ul');
var listItems = el.find('li');
var listItemsHeight = [];
var counter = 0;
var removedItem;
var delay = 3000;
var blurred;
listItems.each(function(i, el){
listItemsHeight[i] = el.clientHeight;
});
function onBlur() {
document.body.className = 'blurred';
blurred = true;
return blurred;
};
function onFocus(){
document.body.className = 'focused';
blurred = false;
return blurred;
};
function loop(){
window.onfocus = onFocus;
window.onblur = onBlur;
if(blurred == true){ return false; }
var listOffset = list[0].offsetTop;
if(counter == listItems.length){
counter = 0;
listOffset = 0;
}
removedItem = list[0].firstElementChild;
$(removedItem).animate({
height: 0
}, 400).children('*').hide();
setTimeout(function(){
$(removedItem).remove();
$(list[0]).append(removedItem);
$(removedItem).css('height', listItemsHeight[counter] + 'px').children('*').show();
counter ++;
}, 700);
}
self.setInterval(function(){
loop() ;
},delay);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment