News Ticker in 4 lines of jQuery

September 20th, 2011 | JavaScript, Tutorials, jQuery | 69 Comments

There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?

new-ticker-in-4-lines

Idea is pretty simple, take first element from list, apply some disappearing effect on it and on callback attach it to the end of the list.

Demo pagesee how it works Downloadtry it for yourself

First we have to create HTML with list of our news, something like this:

	<ul id="ticker">
		<li>
			jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked.
		</li>
		<li>
			Learn how to create image gallery in 4 lines of Jquery
		</li>
		<li>
			jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
		</li>
		<li>
			mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph.
		</li>
	</ul>

Now, let’s put some style on this. We will set height of our visible ticker area and set overflow to hidden. If we want only one news to be visible at the time than ticker height should be the same as height of each element of the list. For more visible news at same time we just have to multiply height of each element with number of news that we want to be visible and set that as height of ticker.

#ticker {
	height: 40px;
	overflow: hidden;
}
#ticker li {
	height: 40px;
}

Of course, you can and should add more style here, but this will be enough to make your ticker to work.

Ok, we have layout set and now it’s time for make this news to start ticking. First we will create function which will apply disappearing effect on first element, append that element to the end of the list after it disappear and revert effects changes. After that, all we have to do is to call that function in desired intervals.

new-ticker-in-4-lines-exp

And here is plain code:

function tick(){
	$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);

Of course, you can change slideUp with any other animation that you like, just don’t forget to revert effects on element after transition. Next example will set opacity to 0 for first element.

function tick(){
	$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);

And please don’t forget to include jQuery at the head of your document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

That’s it, news ticker is done. Take a look at the demo, download source code or leave a comment.

Comments [ 69 Comments ]

peyman
April 8, 2013

great . very helpful . thanks
Mohammad Rahmani
April 17, 2013

Great plugin and explanations
Mohammad Rahmani
April 17, 2013

Absolutely greate
peter
April 18, 2013

how to get the author name also included (example 4)
rouzbeh
May 16, 2013

who use onmuseover = stop tick slide ?
Aleksandr
May 20, 2013

Great Article

» Trackbacks and pingbacks click to expand

Sport TV Online says:

January 15, 2012 at 4:15 am

Twitter…

Loads of people are tweeting about this topic right now…
8 Great Horizontal News Ticker Using Jquery and CSS3 | Amazing Things says:

November 10, 2012 at 4:20 am

[...] Do you want to learn how to create one on your own in only 4 lines od jQuery code ? Check out the original article for more Demo’s and Downloads 4.Featurify Marquee jQuery plugin! Extremely easy to use [...]
9 Best jQuery News Ticker says:

November 14, 2012 at 11:28 pm

[...] 5. News Ticker in 4 lines of jQuery [...]

jqBarGraph – jQuery graph plugin
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome [...]
Google Buzz ER: Google Buzz for Wordpress
Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have Google Buzz posts on your WordPress site.

Google Buzz Er is Wordpress plugin for showing public Google Buzz posts for selected Google account. All you have [...]
mooBarGraph: AJAX graph for MooTools
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.

This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, [...]
JUST – JavaScript Useful Stuff
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]

WORKSHOP
owned by Ivan Lazarevic