You Are Here Home > A JavaScript/jQuery News Ticker
DirectorySync is a directory synchronizing and backup utility providing automated, real-time syncing and scheduled, configurable backups at an affordable price.

A JavaScript/jQuery News Ticker

I know I haven’t posted anything lately, I have been busy which is a good thing but I couldn’t resist this one, here is a simple news ticker using JavaScript and the great jQuery library.

Here is the example:
http://images.code-head.com/code/javascript/jquery-news-ticker.html

I know you might be able to write this using objects in a nicer form but this will work and it’s to demonstrate the idea…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery New Ticker</title>
 
	<script type="text/javascript" src="http://images.code-head.com/jquery/jquery.js"> </script>
 
   <script type="text/javascript">
		$(document).ready(function() {
			var current = -1;
			var elems = new Array();
			var elems_i = 0;
			$('.items').each(function() {
				elems[elems_i++] = $(this);
			});
			var num_elems = elems_i - 1;
			var animate_out = function() {
				elems[current].animate({ top: '-100px' }, 'fast', 'linear', animate_in);
			}
			var animate_out_delay = function() {
				setTimeout(animate_out, 1000); /****************************** Change 1000 to make it longer/shorter/whatever */
			}
			var animate_in = function() {
				current = current < num_elems ? current + 1 : 0;
				elems[current].css('top', '200px').animate({ top: '0px' }, 'fast', 'linear', animate_out_delay);
			}
			animate_in();
		});
	</script>
 
   <style type="text/css">
		.ticker {
			position: relative; /* So we can absolute the .items */
			width: 400px;
			height: 100px;
			overflow: hidden;
			margin: 100px;
			border: 1px dashed #666666;
		}
		.items {
			position: absolute;
			top: 200px;
			margin: 10px;
		}
	</style>
 
</head>
 
<body>
 
   <div class="ticker">
      <div class="items">I'm a Cool</div>
      <div class="items">JavaScript</div>
      <div class="items">News Ticker</div>
      <div class="items">Using jQuery</div>
      <div class="items">For Smooth</div>
      <div class="items">And Nice</div>
      <div class="items">Animation</div>
      <div class="items">By Hamid Alipour</div>
      <div class="items">@ <a href="http://blog.code-head.com" target="_blank">blog.code-head.com</a></div>
   </div>
 
</body>
</html>

Again, the code is straight forward, you must be able to understand what happens but here is a little explanation.

<div class=”items”> … </div> are the news headlines to be animated and using CSS, they are absolute-positioned somewhere under the parent <div class=”ticker”> … </div> box.

Normally, .itmes would be visible under the box, even when they are absolute-positioned but if you look into the stylesheet you will see:

.ticker {
   ...
   width: 400px;
   height: 100px;
   overflow: hidden;
   ...
}

That will prevent this from hapenning, so now our .items are floating somewhere under the box which is what we want. (Change it’s ‘width’ and ‘height’ to fit in whatever space you want…)

The JavaScript code starts with the first one and animates it all the way to the top and then pauses for a second (you can change it to whatever time you want), then it animates the one on the top to the top of the box by animating it all the way to ‘top: -100px;’, note that the same ‘overflow: hidden;’ prevents it from showing.

It then picks up the next item, sets it’s top to 200px and animates it all the way to the top again and then repeat forever.

You might ask why it’s first setting the .items top to 200px; it’s because we are animating them to top of the box so we have to set their top to 200px again each time (we did this first in CSS), this is not important in the first iteration but after that every single item is on top of the box and has to be moved under the box.

I hope this makes sense.

A JavaScript/jQuery News Ticker
Filed under: JavaScript,jQuery   Posted by: Codehead
Do you have any questions? ask here.




1 Comment »

  1. Kevin:
     

    Can this be modified so that it’s single line, horizontal scrolling, and continuous?

    Comment

RSS feed for comments on this post. TrackBack URL

Leave a comment