Advertisement
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. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.
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 class="thumbnail">
<a href="#"><img src="images/1.jpg"></a>
</div>
<div class="info">
<a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a>
<span class="cat">Category: Illustrations</span>
</div>
<div class="clear"></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!
That’s all! You can view the demo here, or download the source code for your own project.
Pretty cool effect. I’ve worked with jQuery carousels before, but I always seem to mess with the code so much that I mess it up. :/ This is a great tutorial, I can see how it can be incredibly useful.
Any idea how to pull a rss feed to use in this news ticker? I’m interested on how to do it without php as I would need it for a blogspot.com blog.
Hi Andrew, i know there is a jQuery plugin which is able to do so. It doesn’t require php. Let me know if you want to know more, and i will try to research and write a tutorial for it.
now i got what i am looking for
Hey! I was looking at the html/css and saw somewhere where a bit of improvement could be made.
You could clean up your html by using the following:
The Knight and the Lady
Category: Illustrations
There is a neat way to clear floats with css. You could either have an overflow: auto; on the li or use the following code to the same effect:
li {height: 1%;} /* IE fix */
li:after {content: ‘.’; clear: both; display: block; height: 0; visibility: hidden;}
Hi Dana,
Thanks for your input. I almost forget this technique as most of the time i use clear:both;
Again, thanks for your input!
Well, the html refused, so I’m posting it again, this time with html char goodness.
<li> < >
<a href=”#”><img src=”images/1.jpg” class=”thumbnail”></a>
<div class=”info”>
<h2><a href=”http://www.vladstudio.com/wallpaper/?knight_lady”>The Knight and the Lady</a></h2>
<p class=”cat”>Category: Illustrations</p>
</div>
</li>
I think that it should be important to add scroll buttons (like previous/next) and the function to stop the autoscroll when the mouse is over a news or over the box.
What do you think?
Is it possible to do?
Yeah, it is possible to do that. For the autoscroll, i think my demo had already implemented right?
Yeah, sorry.
For others the option is:
hoverPause:true,
Then remains to add manual scroll buttons, that i’ve already seen in jCarousel website, but i still can’t include in this news scroller
Hey Dicky,
Thanks for such a concise tutorials. Was able to get this up and running in less than 20-30 minutes.
I did some research on a vertical li scroller and this seems to be the best solution to cross my path.
Thanks again.
Hi Ruby,
I am glad that you like my tutorial. I will have more tutorials coming in future. Make sure you subscribe or follow us in twitter.
When I try to add the hoverPause:true code into the jCarousetlLite() function, it seems to ignore it.
I can manipulate everything else (slow the speed at which is scrolls, how many entries are visible, etc…) except for the hoverPause:true
Any help would be massively appreciated.
It would seem like there is no hoverPause option within the 1.0.1 script.
So I’ll go around the interwebs, see if someone’s created that portion of code that’ll pause on a mouse-hover, then restart the scrolling when the mouse-’unhovers’
great script by the way, easy to understand and simple to integrate.
View the demo > View the source > Access the carousell version used there, paste it in place of the downloaded demo’s version, refresh. Bingo!
I tried simply supplanting jcarousellite_1.0.1 with jcarousellite_1.0.1c4 and it became broken.
Now all my testimonials appear and simply sit statically.
Any advice what might be wrong with the new jcarousellite_1.0.1c4 file, or what I’m doing wrong to implement it?
Thanks a tonnnnn
Great tutorial but I am having a few issues.
1. When the number items is less than the number visible, it seems to scroll once, then reset and scroll the same items once more. I am trying to scroll 4 at a time and if there are lets say 9 items it does the weird scroll one at the end and then reset.
2. if you dont have any thing in the list you get an error on the page. The reason for this is my list is dynamic so some days there might not be any.
3. if you set it to scroll 2 at a time and show 4 but there are only 2 list items it only shows the second one and scrolls it really fats and you never see the first one.
Also with it set to show 4 and only 4 list items it scrolls and then resets and then scrolls. it does not add the items below and scroll up. might be an issue with the counting items and adding them below if only as many as the show number.
4. if you set it to carousel and auto start with only one list item nothing shows up. Shouldnt it calculate how many list items and if les than the how many to display then not scroll?
I know this is a stupid question (I am still learning) but I followed everything exactly but keep getting the error message “jcarousel/jquery cannot be found. If the file exists on the server, use the Files panel to get the file from the server.”
The page contents appear but don’t scroll- what did I do wrong? I saved the plugin in ’scripts’ is that the wrong place? Thanks for help!
Is there any way to change direction from “bottom to top” to “top to bottom”
Hi Alex,
I don’t think we can change the direction. Probably you can contact the plugin’s author and see whether he can include this feature to the next release.
If you open up jcarousellite_1.0.1c4.js, look for this code segment:
o = $.extend({
this is where the initial variable are set for the plugin, scroll down to line 220 where it says
scroll: 1,
change this to
scroll: -1,
this will change the direction of the animation
Thanks! Good news
Very useful. Thanks mate!
Thank you for the code. It is one of the easiest that I have come across. Appreciate the effort very much. ( I checked out most of your links
and book marked the site)
I have found that with IE, the carousel is out of sync by a couple of pixels each time it rotates. I am using a tight space and showing only one record at a time. I have tried the demo in IE and the same thing happens. It resets to the correct position again when the rotation starts at one but with each record it displays two pixels short of the mark. I have tried various amendments with the css but to no avail. Any thoughts?? Great script otherwise!!
I am having the exact same issue with IE. I have been working on this all morning with no luck. Did you ever find a solution?
Anyone found a soulution for this problem?
Hi,
I’ve used the technique and it works great in FF 3.5, Safari and Chrome, but it doesn’t seem to work in FF 3.0 and in IE 8. The ticker simply doesn’t move. Has anyone else encountered this?
Thanks,
STeve
Hi Steve,
I tried the script in both FF3.0 and 3.5 and it works. But i never try on IE8. Do you face any problem with IE6 and 7?
Well i sorted out issue there was extrac coma that had to removed…
Hi
I have tried the carousel with ie 8 and its not working. Is there any work around for this.Please help its urgent. Its working with every other browsers
Hi dude, thanks for this tutorial. I’ve been searched this for about 1 week, finally i landed to your cool website. thank you again.
cheers, hans
Hi hans,
No problem, and i hope the tutorial can help you too.
hi!
great one!
However, there is a bug in your demo page: when loading the page for the first time or just by pressing on CTRL-F5, the inner divs get squeezed! Pressing then in F5 will display the divs correctly. The bug occurs in FF 3.5 and IE7. Is it a known issue? Do you have a fix for this? Thanks, Daniel-
Thanks, I have been looking for this all over.
Though in Chrome the demo has display problem. The pictures and divs are squeezed and its height is fixed to 20px.
The problem in chrome gets solved if you give the class “thumbnail” the height.
Thanks a lot Brother……..
Can anybody tell me how i can reverse the order of scrolling? At the moment Auto scrolling starts from Downwards to upwards. I have a button that will reverse its scrolling order e.g it will start scrolling from top to bottom.
If anybody have the solution then plz help me.
How to add pause to auto scroll when new set of items has arrived ?
Excellent, so straightforward.
great to have it.. Thanks for the post.
How can we put the js files into a folder and still have it to work. Tried this and it stops working, I’m new with all this javascript and jquery.
Check your paths to the js files.
Also, make sure you use the xxx.c4.js file and not the pack file.
very nice..! i like
thanks for sharing
How I call the function stopAuto () or other function to stop scroll from an event of a button?
How can we control the whole scrolling on click of any link or button instead of auto?
Thanks for the step by step tutorial.
Great Work!
I have a small problem with this script. I want to use it for displaying news, so I am not going to be using the link part of it.
However, I want to display 2 at a time, but my descriptions of the news category are cut off because the box its in is too small. Is there a way to increase the size of the whole box it’s set in so I can see all of the text?
Nevermind. I didn’t have the CSS script in the right directory.
How to include this index.htm in another page ?
I try to put this code:
But is not working
Help-me !
How to include this index.htm in another page ?
I try to put this code:
[code] [/code]
But is not working
Help-me !