Ticker Documentation and Demo

Ticker Documentation

First add your ticker markup to your HTML document.

<body>
...
<ul id="my-ticker">
	<li>Example ticker for Epicserve-ui...</li>
	<li>Cras at nibh hendrerit erat mollis commodo sit amet ac est.</li>
	<li>Nullam consectetur imperdiet mauris, non lacinia orci feugiat at.</li>
	<li>Pellentesque porttitor tincidunt quam, eget porttitor risus varius ac.</li>
	<li>Pellentesque viverra dui id dui faucibus viverra.</li>
</ul>
...
</body>

Next you need to style your ticker.

<head>
	...
	<style type="text/css" media="screen">
		.ticker-container, .ticker-container > .mask {
			position: relative;
			width: 500px;
			height: 60px;
			padding: 0px;
			margin: 0px;
			background: #1B2426;
		}
		.ticker-container .mask {
			display: block;
			overflow: hidden;
		}
		#my-ticker li {
			display: block;
			position: relative;
			float: left;
			overflow: visible;
			white-space: nowrap;
			line-height: 20px;
			font-size: 20px;
			margin: 0;
			padding: 20px 20px 20px 0;
			color: #fff;
		}
	</style>
	...
</head>

Finally include the required javascript libraries and start your ticker.

<head>
	...
	<script src="../eui/js/jquery/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../eui/js/ui/jquery.ticker.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			$('#my-ticker').ticker();
		});
	</script>
	...
</head>

Ticker Demo

  • Example ticker for Epicserve-ui...
  • Cras at nibh hendrerit erat mollis commodo sit amet ac est.
  • Nullam consectetur imperdiet mauris, non lacinia orci feugiat at.
  • Pellentesque porttitor tincidunt quam, eget porttitor risus varius ac.
  • Pellentesque viverra dui id dui faucibus viverra.