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

10 thoughts on “A nice vertical scrolling news ticker plugin using jQuery

  1. How can I cause the script to pause at the very beginning? Right when the page loads the first news item is swiped off the screen. It would be fantastic to have the 2 second pause right when the page loads.

  2. @prabhat: this is the js files download link – “http://demos.2lessons.info/url.php?url=https://www.box.com/s/f236ff9795b61dad3fd9”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s