Jquery Simple News/Content Ticker

Before Start

This is a simple content display ticker. We can use it for news/quote/testimonial ticker display. Last week I wanted to give a quote ticker in a website. As usual I was looking for Query News Ticker and gone through some. Finally I have decided to make a simple own script, tried and it works fine.

HTML – Understanding the Layout

Decide a box to display content and give an id, say id=”ticker”

<div id="ticker"></div>

JS – Add Jquery core and a simple ticker script

Add the Jquery core as usual. Then the script is simple.
Step 1: Set the content array (It can be HTML)
Step 2: Call the recurring function
Step 3: In the recurring function change the content of the div in some time interval
Step 4: Don’t forget to reset i value at end of the array
After some modification, the code looks like…

<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function () {
	createTicker();
});

function createTicker(){
	//set the quotes array
	tickerItems = new Array(
	'"There are no great men, only great challenges that ordinary men are forced by circumstances to meet."<br/><b>William F. Halsey</b>',
	'"Man is only truly great when he acts from his passions."<br/><b>Benjamin Disreali</b>',
	'"The price of greatness is responsibility."<br/><b>Winston Churchill</b>',
	'"To achieve great things we must live as if we were never going to die."<br/><b>Marquis de Vauvenargues</b>'
	);
	i = 0;
	tickerIt();
}

function tickerIt(){
	if( i == tickerItems.length ){
		i = 0;
	}
	//change without effect
	//$('#ticker').html(tickerItems[i]);

	//change with effect
	$('#ticker').fadeOut("slow", function(){
		$(this).html(tickerItems[i]).fadeIn("slow");
		i++;
	});

	//repeat
	setTimeout("tickerIt()", 5000);
}

Demo & Download

DEMO Here
Download Source