stevoPerisic/index.html

## 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>

## 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;
}

## 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);
};
	<!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>
	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;
	}
	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);
	};