Cut & Paste Random Content (from DIVs) script
|
Description: Easily display a random piece of content chosen from many on the page to your visitors using this script! Just wrap the participating contents each inside a DIV with a special CSS classname, and that's it! Furthermore, you can have multiple "groups" of random content, with the script picking one to display randomly for each group.
This script comes with accessibility in mind- browsers with JavaScript disabled will simply see all the contents at once.
Example: (reload page to see a random content served for each group)
Random Content Group 1 (4 pieces of content total):
Group 1 Content 1
Group 1 Content 2
Group 1 Content 3
Group 1 Content 4
Random Content Group 2 (2 pieces of content total):
Group 2 Content 1
Group 2 Content 2
Directions:
Step 1: Add the below script to the HEAD section of your page:
Step 2: Then, add the below example HTML to your page to see how to apply the script to ordinary content on your page:
As shown in the code of Step 2, to get the script to randomly show one piece of content from a selection, wrap all the participating contents each inside a DIV with a special CSS classname:
<div class="randomcontent group1"> //Some content here </div> <div class="randomcontent group1"> //Some content here </div>
The classname should follow the syntax:
class="randomcontent groupX"
Where "x" is an arbitrary integer that should be shared amongst all content within the same group. So in the above, there are two pieces of content, and the script will randomly pick one to show each time the page loads. At the end of your page, invoke the script by calling the script:
<script type="text/javascript"> randomcontentdisplay.init() </script>