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
admin