Random Content Order script
Updated: Sept 21st, 07 to support randomizing
TR
elements as well (instead of just DIV
).
Description: Randomize the display order of arbitrary content on your page with this script! As a result, the order in which the participating contents is displayed on the page changes randomly each time the page loads. This script is useful when you wish to give certain contents equal visibility on the page, so no one content always occupy the top spot.
Simply wrap the desired contents in DIV containers with a shared CSS
class
attribute, and the script will scramble the display order of these content
relative to one another. You can also use this script on a TABLE
to
randomize the order of its rows (via the TR
tag).
Demo: There are five ordinary content below. Reload page to see their display order randomized each time:
Step 1: Insert the following script in the HEAD section of your page
Step 2: Insert the below sample code into the BODY section of your page:
The code of Step 2 illustrates how to apply the script to ordinary content on your page- simply wrap the participating content inside a DIV tag with a common "class" attribute:
<div class="group1">
Content 1
</div>
<div class="group1">
Content 2
</div>
"
<script type="text/javascript">
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
</script>
At the very end, call function "randomizeContent()
" with
a shared (identical) CSS class
name to instantly randomize the above
contents' display order. That's it!
You can also use this script on TABLE rows to randomize their
display order. Just give the participating TR
tags a common CSS
class name. Make sure the TR
elements all belong to the same
TBODY
:
<table border="1" width="100%">
<tr class="group2">
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr class="group2">
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr class="group2">
<td>Row 3</td>
<td>Row 3</td>
</tr>
</table>
<script type="text/javascript">
//randomize order of contents with DIV class="group1"
randomizeContent("group2")
</script>
Notes
1) As mentioned, to group abitrary content on the page to be randomized, you give every content the same CSS class name. You're free, however, to give certain individual content within this group additional class names to style that content differently from the rest- just separate multiple class names with a space:
<div class="group1">
Content 1
</div>
<div class="catclass group1">
Content 2
</div>
<div class="group1 dogclass">
Content 3
</div>
Here we have 3 contents that will be randomized as a group, with the 2nd and 3rd content each carrying an additional class attribute.
2) You can call "randomizeContent()
" multiple times with
different class values to randomize multiple groups of contents:
<script type="text/javascript">
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
randomizeContent("group2")
</script>
3) Depending on the type of content you wish to randomize on the page, you may want to call function "randomizeContent()" after the page has fully loaded (instead of instantly) to prevent any problems:
<script type="text/javascript">
window.onload=function(){
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
}
</script>