Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite


Today i published an update to this post answering many questions asked “A nice vertical scrolling news ticker plugin using jQuery“.

                                

News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site.

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.

news-ticker

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script>
</head>
</html>

Step 2

In the same document, create a <div> and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another <div> class name “newsticker-jcarousellite”. Remember, this is very important and you will need to use the same class name when you configure jCarousel Lite.

Step 3

In the “newsticker-jcarousellite” <div>, create an <ul> element. Each news will be an individual <li> element. In this example, i had created 6 news, so i will have 6 <li> elements(but i am not going to show all). We will have the thumbnail float to the left, while the title and other information float to the right.

<li>
    <div>
        <a href="#"><img src="images/1.jpg"></a>
    </div>
    <div>
        <a href="http://www.vladstudio.com/wallpaper/?knight_lady">
        The Knight and the Lady</a>
        <span>Category: Illustrations</span>
    </div>
    <div></div>
</li>

Step 4

After you created your <li> element, it is the time for us to configure the jCarousel. Under the <head>, add these scripts:

<script type="text/javascript">
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        visible: 3,
        auto:500,
        speed:1000
    });
});
</script>

The script itself is pretty straight forward. The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options which you can configure easily. Refer the documentation for more information.

Step 5

Basically you had done everything, except styling your content. So, just copy and paste the scripts below in your style.css file.

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }.clear { clear: both; }

Finish!

34 thoughts on “Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

  1. Hi this article is very use full to me thanks…
    but now my problem is that i want 200X200 image size scroll and in this example image size is 28X30 so how can i change this size to large… I m new in jquery
    Please reply me…………..

      1. Hello Hawk,

        Making it dynamic using Sql server table in Asp.net is very simple here. You only need to replace the hard coded strings into data retrieved from your SQL-Server database.

        I’ve added an example link to the above post as well as the required project files.

        If you are still facing any issue, feel free to contact me again.

    1. I tried your code it is not working
      I followed instruction Create a table employee with the following columns
      name vachar(50),date_joined datetime

      Simply change the server name, userid and password of your sql server database @ web.config file.
      Then run the file VerticalScrollExample.aspx.

      i am getting this error Microsoft JScript runtime error: ‘jQuery’ is undefined

      Can you please double check again

  2. Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I’d prefer to use some with the content on my blog whether you don’t mind. Natually I’ll give you a link on your web blog. Thanks for sharing.

  3. Helpful post and great sharing. Some things in here I have not thought about before, I would like to use this moment to say that I really love this blog. It’s been a fantastic resource of information for me. Thank you so much!

  4. For some reason I cannot see( Simply add the following 2 lines into your Exchange.ascx page just bellow) can you send to my email or update the Dynamic VerticalScrolling link

  5. You really make it seem really easy along with your presentation however
    I in finding this matter to be really one thing which I feel
    I would by no means understand. It sort of feels too complicated and very broad for me.
    I’m taking a look ahead for your next publish, I’ll try to get the grasp of it!

  6. i download the source files…where do I place them on my site…in plugin? in themes? where sorry but I’m new to all of this.

  7. Undeniably believe that which you stated. Your favourite justification seemed to be on the web the easiest factor to be mindful of.
    I say to you, I definitely get annoyed while people consider issues that they plainly don’t realize about. You managed to hit the nail upon the top as well as outlined out the whole thing without having side effect , other people can take a signal. Will probably be back to get more. Thanks

    My webpage about engineering: Arlie

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