A nice vertical scrolling news ticker plugin using jQuery

Are you looking for Facebook style vertical scrolling news ticker application which shows updates from friends? It creates a smooth vertical scrolling effect which consequently attracts visitors to any news update because of its animation effect. This is a tutorial, which is very suitable for beginers. Even people having less knowledge in jQuery / Javascript can also implement this into their website.

Almost all modern web browsers supports this plugin. Hence you won’t have to worry about compatibility.

The tutorial contains one one html file and one js files including  jQuery plugin.

– index.htm
– newsticker.js (Small javascript file to create the news ticker)

   

Lets include all those required Javascript and CSS files.

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="css/newsticker.css" rel="stylesheet" type="text/css" />
<script src="js/newsticker.js" type="text/javascript"></script>

Now we need to create a DIV [ ID: newsticker ] element where we place our content to be scrolled.

<div id="newsticker">
Now each individual news to be placed inside a DIV element having class='news'

<div style="top: 101px;" class="news">
          <div class="history">
          <div class="circle-outer"><div><span>March 29, 2012</span></div>
          </div>
</div>
          <div class="description"><h1>
<a href="itswadesh.wordpress.com/2012/03/29/facebook-type-vertical-navigation-menu-created-with-jquery/">
Facebook type vertical navigation</a>
</h1>
<div>
This amazing technology of facebook is now been adopted by many other websites...
</div>
          </div>
</div>

If you wish to have dynamically loaded content from database in your news ticker, simply pur your database result inside a div having class name as ‘news’.

This is an update to the older post: Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite