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.
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!
Hi this article is very use full to me thanks...
ReplyDeletebut 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..............
simply change the css
ReplyDelete.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
Change the width property some bigger value.
thank you for your nice code
ReplyDeleteHow do I make featured post image automatically appear in slider?
ReplyDeleteI am often to blogging and i really appreciate your content. The article has really peaks my interest. I am going to bookmark your site and keep checking for new information.
ReplyDeleteNice 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.
ReplyDeleteYour place is valueble for me. Thanks!…
ReplyDeleteNice post. Good job.
ReplyDeleteHelpful 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!
ReplyDeleteGood site! I adore numerous of the articles which have been written, and particularly the comments posted! I will undoubtedly be visiting once again!
ReplyDeleteexcellent material from your site,,great stuff
ReplyDeletei will most certainly vist again..
thankyou
How to set scroll image top to down...
ReplyDeletescroll image top to down will not be as simple. Because basically this whole thing is from down to top.
ReplyDeletePlease tell me how to make it dynamic using Sql server table in Asp.net
ReplyDeleteHello Hawk,
ReplyDeleteMaking 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.
I don t see the link
ReplyDeletemay you please send to my email green_hawk_lb@hotmail.com
The following link contains the script file
ReplyDeleteVerticalScrolling
I tried your code it is not working
ReplyDeleteI 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
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
ReplyDeleteI can't wait for more articles in this way.
ReplyDeleteThere are lots of tuts on this topic but this is a nice one and I like this one.
ReplyDeleteThanks a lot for the post! This has saved me lots of time
ReplyDelete[...] and style jcarousel lite Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite How can I degrade from Jquery carousel to css scrolling list gracefully How to create simple and [...]
ReplyDeleteHi there
ReplyDeletecan you tell me how to increase the content height without increasing the main height of the scroller. i Can't put more content in li i want its height to be auto not fixed via script.