Article
Random Content Rotation Made Easy
Page: 1 2
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.