Member Avatar for linekill

Hi.
I'm new to this Java Script.
Could anyone give me an idea how to start a quotation rotator that someone could embedded into their webpage, a JavaScript script, and that would display a random quotes on their page.

The quotes could just be saved as a .txt file.

  • 3 Contributors
  • 4 Replies
  • 160 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 4 Replies

Member Avatar for brechtjah

This shows you how to create a random number in Javascript:
http://www.javascriptkit.com/javatutors/randomnum.shtml

That random number would allow you to go trough your array of quotes. That array can be filled by reading from a file:
http://www.javascripter.net/faq/reading2.htm#top

Although I suggest just filling an array in another .js file and then including it in your html file like this:
<script type="text/javascript" src="quotes.js">

in quotes.js:

var quotes = new Array(100);
quotes[0]="SomeRandomQuote";
quotes[1]="AnotherRandomQuote";
quotes[2]="GuessWhat";
// ... Etcetera
function returnQuote(randomNumber) {
  return quotes[randomNumber];
}

This would mean everytime you want a random quote you just generate the number and call returnQuote(randomNum) with it.

EDIT: example to help you on the way : - )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript">
			var quotes = new Array(100);
			quotes[0]="SomeRandomQuote";
			quotes[1]="AnotherRandomQuote";
			quotes[2]="GuessWhat";
			// ... Etcetera
			function returnQuote(randomNumber) {
				return quotes[randomNumber];
			}
		</script>
	</head>
	
	<body>
		<div id="randomQuote" style="width: 200px; height: 300px; background-color: #bbbbbb;" onClick="javascript:getElementById('randomQuote').innerHTML = returnQuote('1');">
		</div>
	</body>
</html>
Member Avatar for linekill

@brechtjah: Thanks for the quick reply and for those info. Those got me started with the project.

I decided to take it one step higher... So I created a PHP script where users can submit Quotes which will be saved on a MySQL database. (Completed)

I'm currently working on creating a script to display those quotes.

And the goal now is to let anyone copy and paste a script (a script like that of google ads) and paste it on their site to display the quotes.

Any idea how this could be done? I'm reading stuffs about AJAX but I don't know where to start.

Member Avatar for brechtjah

So you want a script to
1 Access the database
2 Get quotes
3 Display random quotes

Seems pretty straight forward to me, no AJAX needed actually, only if you want random quotes to appear every so seconds.

Those three steps seem actually really easy to me in PHP but watch out when the users download your script that you hide your database access information.
You can read up on AJAX here:
http://www.w3schools.com/Ajax/ajax_intro.asp
or here:
http://www.xul.fr/en-xml-ajax.html
here:
http://www.tizag.com/ajaxTutorial/

:) Google => ajax tutorial

Member Avatar for essential

Hope this will add a few ideas' in your coding technique... This simple script will generate random quotes' each time you reload or open up the page!

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Random Quotes</title> 
<script type="text/javascript">
/* <![CDATA[ */

var myQuotes = ['Quote #1','Quote #2', 'Quote #3', 'Quote #4', 'Quote #5', 'Quote #6', 'Quote #7'];

/* You can add more quotes, as many as you desired. 
Simply add it up to myQuotes arrays'...
You can also associate this with "date" objects, using  the switch method. 
There are alot ways to do this, but this will do good for now... */


function showQuotes() {

for (var i = 0; i <= myQuotes.length; i++) {
document.getElementById('rQuotes').innerHTML = '<p>' + myQuotes[Math.floor(Math.random()*i)]; + '</p>'; } 
}
window.onload = showQuotes;
/* ]]> */
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
  
</head> 
<body>  
<div id="rQuotes"></div> 
</body>
</html>

Good day to you...

This markup is a valid xHTML 1.0 Strict

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.