Last updated on January 17th, 2016 at 09:16 am
Simple Jquery infinite news ticker.We have some limitations while using the regular MARQUEE tag which is available in HTML. This particular text scroll is built using jquery which has a very eye caching and repeating scroll without any delay which we usually experience while using marquee. It even has setting to show the number of lines.Other settings include
Speed: You can set this to suit your requirement
Pause: The delay in showing each line
Animation: Fade or anything you need
MousePause: Can be set as true or false. If you want the scroll to pause when mouse pointer is over it.
Height: Self explanatory.
Direction: Up or Down.
For this we need a very basic css styling.
#news-container {width: 200px;margin: auto;margin-top: 30px; border-bottom: 2px solid #333333;border-top: 2px;solid#333333;} #news-container ul li div{ padding: 2px;background: #ffffff; }
Then some libraries including the regular jquery library.
<script type="text/javascript"src="jquery.js"> </script> <script type="text/javascript"src="jquery.vticker-min.js"> </script>
The javascript settings page. You can customize this according to your requirement.
$(function() {$('#news-container').vTicker({ speed: 900, pause: 3000, showItems: 1, animation:'fade', mousePause:true, height: 0, direction:'down' }); });
Then comes the HTML part.
<div id="news-container"><ul> <li><div> This is the first set of news <br></div></li> <li><div> Second set of news</div></li> </ul></div>
DOWNLOAD JQUERY NEWS TICKER FILE
DEMO