Home > JQuery > A nice vertical scrolling news ticker plugin using jQuery

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

  1. prabhat
    July 18, 2012 at 1:42 PM

    unable to download js files..

  2. Brady
    July 21, 2012 at 12:03 AM

    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.

  3. Lanray
    July 25, 2012 at 6:57 PM

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

  4. karen
    October 6, 2012 at 11:18 PM

    How do I get this working on my site? where do I place these files?

  5. October 7, 2012 at 12:53 PM

    How to i make it move instead of vertical to horizontal. .

  6. ravi
    December 7, 2012 at 6:14 PM

    I want to load data while scrolling the vertical scroll bar using jquery..

  7. February 14, 2013 at 9:33 PM

    A great news ticker if you only have one line of text for each item but it jumps if an item consists of 2 lines…

  1. June 4, 2012 at 9:21 PM
  2. June 4, 2012 at 9:31 PM
  3. September 27, 2012 at 3:31 PM

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

Follow

Get every new post delivered to your Inbox.

Join 65 other followers

%d bloggers like this: