Random Content Rotation Made Easy

After reading Random Image Rotation by Dan Benjamin, I thought I’d share a method I used recently to rotate ‘Success Stories’ on my site. The concepts and script I will present in this article can be used in the same way as Dan’s to keep a page from becoming dull to repeat visitors.

The concept is similar but not the same; the script we’ll talk about here can be used to create random rotation of any (X)HTML code you choose. It’s server-based and not dependent on JavaScript.

Overview

You create a number of <div>s. You import a style sheet generated by a Perl script. The style sheet sets all but one random <div> to display:none. Your design looks fresh, search engines pick up all the content (so, any links in the random content are seen every time), and screen reader users get it all too*, keeping your content accessible. The script is simple, but useful.

*As pointed out by Joe Clark, some screen readers respect display:none, so this does not apply to those delinquents. You can use something other than display:none if you wish.

Installing the Script

The script is written in Perl and should be usable on nearly all Web hosts — you can download it here. Refer to your Web host’s support desk or help files if you don’t know how to get this script working. The only line you may need to change is the first line of the script, which points to the Perl executable on your server.

The Example

As an example, we’ll use 3 ‘Success Stories’; each contains a page of content:

success1.html 

success2.html 

success3.html

We have room to point to only one of these Success Stories at a time when we display our homepage page to a visual browser, but there’s no reason why screen readers and search engines shouldn’t see all three every time.

Let’s create three sections of code that can be used to lead users from the homepage to the full Success Story content pages:

<div id="success1" class="success-story"> 

  <p><a href="/success1.html"><img src="/images/success1.jpg" alt="Foo Ltd." border="0" />Foo Ltd. has been invaluable in bringing our product to market successfully.....</a></p> 

</div> 

 

<div id="success2" class="success-story"> 

  <p><a href="/success2.html"><img src="/images/success2.jpg" alt="Foo Ltd." border="0" />Foo Ltd. delivered a highly professional service.....</a></p> 

</div> 

 

<div id="success3" class="success-story"> 

  <p><a href="/success3.html"><img src="/images/success3.jpg" alt="Foo Ltd." border="0" />Foo Ltd. provided the project management skills we were looking for.....</a></p> 

</div>

The code has a <div> for each section of content that we want to include in the rotation. The content of the <div>s is not important to the script, however. The important part is the id of each <div>, which has two sections: a prefix and a number. The class of the <div> can be whatever you need for CSS display purposes. You can, of course, use the id, but if you do this, you’ll have each id appearing in your selector. Using one class makes this easier.

The Prefix

The first part of the id is the prefix. The prefix comprises everything that comes before the number. In this example, the prefix is:

success

We will pass this prefix to the script.

The Number

The second part of the id is the number; ids must always start at 1 and ascend in increments of 1 (1,2,3 etc.). You can have as many ids as you like.

We will pass the highest number to the script.

The Script

The concept behind the script is simple. The script generates a style sheet that will hide all but one (random) <div> using display:none. We add it to our homepage using the standard <link> element:

<link type="text/css" rel="stylesheet" href="/cgi-bin/random_content.pl?t=3&p=success" />

The important part here is the href that points to the style sheet:

/cgi-bin/random_content.pl?t=3&p=success

Let’s break it up and look at each section in turn.

/cgi-bin/random_content.pl?

This section identifies the location of the script on your server, followed by a question mark.

t=3

t stands for total. You should replace 3#ec#/ with the total number of content <div>s you used above.


&
You need the ampersand to separate the two values you're passing.
p=success
p stands for prefix. You should replace success with the prefix you used for the ids of your divs.


That's it! Visitors that don't make use of the CSS, such as search engine crawlers and screen readers that ignore CSS, will get all the content every time. With a little imagination, there are many interesting things you can do with this simple script. It worked very nicely for me; I hope it does for you, too! 

Changing The CSS



As I mentioned earlier, you don't have to use display:none -- you can change it if you wish. One alternative is to absolutely position the content so that it lies off the visible screen area, say, 1000 pixels to the left. To do this, you'd change the following line:

my $css = '{display:none;}';
Change it to:
my $css = '{position:absolute; left:-1000px; top:0px;}';
This should make non-random content more accessible to screen readers. The choice is yours!
A Parting Comment
Thanks to the brilliance of Internet Explorer, you may have problems if you try to view the output of this script directly in your browser. Problems arise because the browser doesn't listen to the MIME type that the script outputs when you try to view it directly (though it works fine when it imports it as a style sheet).
If you want to view the output using this browser, you will need to add &debug=1 to the URL you use to access the script. This causes the script to output using a MIME type of text/plain instead of text/css. Don't use debug=1 when importing as a style sheet; only add it if you experience problems viewing the output of the script in your browser for testing purposes.
The other alternative is to rename the script ".css", which should also fix this problem without you needing to add debug=1, as this tricks the browser into believing it's getting css.