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>