   |  | Join Date: Jul 2006 | Posts: 9,243 | Location: Topeka, KS |
Display Content in a Random Order - XHTML Valid Method
This is not just another banner rotator mod.
This will allow you to define an array of content (banners, links, text, whatever), then have them display in a random order with each page refresh.
Copy this code and save it as random.js
Upload random.js to your clientscript folder.
Copy the follow to your 'Additional CSS' section of your style
Add the following code to the bottom of your HEADINCLUDE template
Insert your content using <div class=group1> tags. Be sure to include the code below the html
You can make as many groups as needed, and call this script multiple times. Just be sure to repeat the CSS and div classes using group2, group3, etc...
This will allow you to define an array of content (banners, links, text, whatever), then have them display in a random order with each page refresh.
Copy this code and save it as random.js
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
} Copy the follow to your 'Additional CSS' section of your style
Code:
.group1{
visibility: hidden;
} Code:
<script type="text/javascript" src="clientscript/random.js"></script>
Code:
<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> Last edited by Brandon; 02-07-2008 at 07:12 PM.
Linear Mode
