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:

---

Directions:

Step 1: Insert the following script in the HEAD section of your page

Select All
<style type="text/css"> .group1{ visibility: hidden; } </style> <script type="text/javascript"> /*********************************************** * Random Content Order script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ function randomizeContent(classname){ var contents=randomizeContent.collectElementbyClass(classname) contents.text.sort(function() {return 0.5 - Math.random();}) var tbodyref=contents.ref[0].tagName=="TR"? contents.ref[0].parentNode : new Object() for (var i=0; i<contents.ref.length; i++){ if (tbodyref.moveRow) //if IE tbodyref.moveRow(0, Math.round(Math.random()*(tbodyref.rows.length-1))) else contents.ref[i].innerHTML=contents.text[i] contents.ref[i].style.visibility="visible" } } randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element var contentobj=new Object() contentobj.ref=new Array() //array containing references to the participating contents contentobj.text=new Array() //array containing participating contents' contents (innerHTML property) var alltags=document.all? document.all : document.getElementsByTagName("*") for (var i=0; i<alltags.length; i++){ if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){ contentobj.ref[contentobj.ref.length]=alltags[i] contentobj.text[contentobj.text.length]=alltags[i].innerHTML } } return contentobj } </script>

Step 2: Insert the below sample code into the BODY section of your page:

Select All
<div class="group1"> Content 1 </div> <div class="group1"> Content 2 </div> <div class="group1"> Content 3 </div> <div class="group1"> Content 4 </div> <div class="group1"> Content 5 </div> <script type="text/javascript"> //randomize order of contents with DIV class="group1" randomizeContent("group1") </script>

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>