WillMaster Possibillites Logo EzineSeek Award
Random Content Delivery
by
William Bontrager

Permission is granted to reprint this article in its entirety provided no changes are made to the article text and the author's name, signature lines, and copyright line are printed with the article. However, you may change the article's title.

There are many JavaScript and CGI applications available to put random content on your pages -- random quotes, random links, random pictures, random sound, random jokes, random facts; you get the idea.

This article presents a JavaScript function that will deliver whatever random content you want for your pages. You can use it on one page or set it up to use across your entire website.

Still, it is easy to implement. I'll show you step by step.

Note: This article contains both JavaScript and HTML code. If you are reading this on an HTML-enabled email program, you may need to "view source" for all the code to be visible.

As an alternative, you may view this article in the archives. Or you may wish to grab the source code from the demonstration page. The archives are at http://willmaster.com/possibilities/archives/ and the demonstration page is at http://willmaster.com/possibilities/demo/rc.shtml

JavaScript is line break sensitive. If you suspect your email program may have wrapped the code causing the code to run with errors, you can retrieve good code from the archives or the demonstration page.

Instructions:

There are two steps.

You will have an example for each step.

The first step is to put the JavaScript function between the <head> and </head> tags of your page. (This first step is slightly different depending on whether you are implementing the function on only one page or site-wide. I'll cover both.)

The second step is to put the content display code on your page wherever you want to see the content. (This step is the same whether you're implementing this on only one page or site-wide.)

STEP ONE:

The first step is to put the JavaScript function between the <head> and </head> tags of your page: 


<script language="JavaScript">
<!-- Copyright 2000 by William Bontrager
function getcontent() {
var count = 10;
var r = Math.ceil(Math.random() * count);
if (r == 1) return "Did you hear the one about the ...";
if (r == 2) return "<a href=\"http://domain.com\">Click</a>";
if (r == 3) return "<img src=\"graphic.gif\">";
if (r == 4) return "Four<br>4<br>IV";
if (r == 5) return "<a href=\"sound.wav\">Noise!</a>";
if (r == 6) return "Only the insecure need to brag.";
if (r == 7) return "<img src=\"picture.jpg\">";
if (r == 8) return "<u>It</u> is <b>BIG</b>&nbsp;:)";
if (r == 9) return "Fish swim. <i>Book of Facts</i>";
if (r == 10) return "The sky is falling up.";
} //-->
</script>

The above 17 lines of code has 10 page content items from which the function randomly selects for inclusion in the web page. For demonstration purposes, the 10 items represent several different types of content -- text, graphics, sound, with and without HTML code.

You'll notice on line 4 there is a number. It represents a count of the number of items available for selection. The number in the example is 10 because the example has 10 items from which to choose.

The items themselves begin on line 6. Each item is numbered. The page content is between quotes.

(You'll notice the example uses quotes within the content in a few places. You also see a backwards slash immediately in front of the quote character. The backward slash tells the browser to print the quote character rather than treating it as the end of the page content.)

The items can have any HTML code. Just remember to type a backward slash before every quote character that is part of your content.

Note that each item is on a line by itself. If you wish to break an item into two or more lines, end the first line with the characters 

     " +
(quote space plus) and begin the following line with the character 
     "
(quote)

So you might end up with something like this: 

     if (r == 9) return "Fish " +
     " swim. <i>Book of Facts</i>";

You can have as many or as few page content items as you want. When you add or delete items, renumber the items and change the number on line 4 to the new count.

For site-wide implementation:

  1. Put the entire function, except for the first and last lines, into a separate file named getcontent.js

    Upload the file to your server. You must have a copy of the file in each directory on your server where a web page will use the function.

  2. Put the following two lines between the <head> and </head> of every web page that will use the function: 

    
<script language="JavaScript" src="getcontent.js">
</script>

That's the only difference for site-wide implementation.

Whenever you want to change the random content for your site, you only need to change the file getcontent.js

STEP TWO:

The second step is to put the content display code on your page wherever you want to see the content: 


<script language="JavaScript"><!--
var before = '<font size="2">';
var after = '</font>';
var content = getcontent();
document.write(before + content + after);
// -->
</script>

On lines 2 and 3 you see "var before ..." and "var after ...", respectively.

Whatever you put between the apostrophes (single quotes) of the "before" line gets put on the page before the random content. You can use this for font tags, tables, anything you always want to come before the content.

Whatever you put between the apostrophes (single quotes) of the "after" line gets put on the page after the random content.

(The demonstration page at http://willmaster.com/possibilities/demo/rc.shtml uses the "before" and "after" lines to put the content in a box with a background color.)

Note # 1: Lines 2 and 3 are necessary. If you do not want any code before or after the content then just delete everything between the apostrophes -- but keep the apostrophes.

Note # 2: If you must include an apostrophe or single quote within the "before" or "after" code, type a backward slash immediately before the apostrophe.

That's all there is to it. See the demonstration page for an implementation.

Happy randomness!

If you want help or have questions, contact me at the address below.

Copyright 2000 by William and Mari Bontrager

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com