http://www.dynamicdrive.com/dynamicindex17/randomcontentorder.htm
step 1: put in <HEAD>
<style type="text/css">
.group1{
visibility: hidden;
}
</style>
<script type="text/javascript">
/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* 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();})
for (var i=0; i<contents.ref.length; i++){
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 in <BODY>
<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>
At the very end, call function "randomizeContent()" with the contents' class value as its parameter to instantly randomize the above contents' display order. That's it!
You can call "randomizeContent()" multiple times with different class values to randomize multiple groups of contents:
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>