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

Advertisements
This entry was posted in Jquery, PHP, Tutorial and tagged , , , , . Bookmark the permalink.

16 Responses to Jquery Simple News/Content Ticker

  1. Baj says:

    Thanks for the tutorial, looks nice and clean.

    Is there an easy way to refresh the contents of the array with new itmes in a given interval? I’d like to display things from my database and add in newer items as they get posted

    • beski says:

      Hi Baj,
      Without ajax it is very easy.
      Fill the tickerItems array from the database. It will work.

      Then, by ajax we have to something more. Will try to post while free.

      Thanks.

      • Baj says:

        That’s what I’m doing now (populating the array from a database), so that’s working great 🙂 Thanks for the answer, I’ll be hanging around in case you come up with something regarding the last bit

  2. newbie173 says:

    Thank you so much Beschi!
    I tried other scripts but so far yours is the most robust one! Thank you again for sharing! 🙂

  3. free9ja says:

    i love this but how do i populate the array from database?Please can someone help?

  4. vijin says:

    hi

    how we fill the ticker items with database value.

  5. Chris Rwiza says:

    hey good good it works super

  6. Chris says:

    Can i also make it work to put the text like ‘There are no great men, only great challenges that ordinary men are forced by circumstances to meet.’ in the html section? because i want to add a blockquote to it so the text is styled in the block quote’s style

  7. fondotinta says:

    Realy simple! extact wthat i was looking for!
    Thanks!

  8. naseeh says:

    its very good article.tnx

  9. Matt says:

    Thank you – looked at a few but this was the best!!

  10. i want to display content from database could you help me with the code

  11. Chandan says:

    I want to display content from database. Can you please suggest me the code or link to refer

  12. With havin so much written content do you ever run into any issues of plagorism or copyright violation? My website has a lot of completely unique content I’ve either authored myself or outsourced but it seems a lot of it is popping it up all over the web without my permission. Do you know any ways to help prevent content from being stolen? I’d truly appreciate it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s