liScroll – a jQuery News Ticker

liScroll – a jQuery News Ticker

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
15,444 views

liScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker

The markup

<ul id="ticker01">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
    <!-- eccetera -->
</ul> 

To build your news ticker all you need is the above markup: an unordered list with a unique ID

Once you’re done with your markup, simply call liScroll() like that:

$(function(){
    $("ul#ticker01").liScroll();
}); 

If you want your list to scroll faster or slower than the default value, modify the travelocity param

$(function(){
    $("ul#ticker02").liScroll({travelocity: 0.15});
}); 

and Done.


Demo: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
Download: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/jquery.li-scroller.1.0.js
Source: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

  1. DHTML News Ticker Wizard DHTML News Ticker is a professional highly configurable javascript news...
  2. A Javascript News TickerTape Component This component vertically scrolls a number of items within a...
  3. Advanced RSS Ticker Advanced RSS Ticker RSS is a popular format for syndicating...

Do you like this post?

Email:     

Tags: , , , , , , , , , , ,

2 Comments »

  1. avatar comment-top

    Thanks for your code.. however, I found a problem displaying the content correctly when each of the has different height.. bottom of the longest li content will not be displayed..

    Do you have a solution for this? Thanks.

    comment-bottom
  2. avatar comment-top

    2 questions about this ticker:

    1. Can I have it start with the content on screen of starting off?

    2. When the ticker comes to an end, is there any way to eliminate the blank space that comes up?

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment



Web Design & CSS (Templates) - TOP.ORG