Cut & Paste Random Order content script
|
Description: This script lets you shuffle the display order of regular content on your page. Just wrap the participating contents each inside a DIV with a special CSS classname, and the script will scramble the order in which these contents are shown on the page from top to bottom! You can have multiple "groups" of random order content, with the script scrambling each group independently.
This script comes with accessibility in mind- browsers with JavaScript disabled will simply see all the contents in their original source order.
Example: (reload page to see how the order of contents change)
Random Order 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 Order 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 scramble the display order of contents within a group, wrap all the participating contents each inside a DIV with a special CSS classname:
<div class="randomordercontent group1"> //Some content here </div> <div class="randomordercontent group1"> //Some content here </div>
The classname should follow the syntax:
class="randomordercontent 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 scramble their display order when shown. At the end of your page, invoke the script by calling the script:
<script type="text/javascript"> randomordercontentdisplay.init() </script>