Miscellaneous Hacks - Display groups of content in random order

This is not just another banner rotator mod...
This will not increase your server load...
This will not break your XHTML vadlidation...

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 or download the attached file:

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

}

Upload random.js to your clientscript folder.

Copy the follow to your 'Additional CSS' section of your style

.group1{
visibility: hidden;
}

Add the following code to the bottom of your HEADINCLUDE template

<script type="text/javascript" src="clientscript/random.js"></script>

Insert your content using <div class=group1> tags. Be sure to include the code below the html

<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>

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...

Live Demo - Look at the small banners on the right. Refresh the page to watch them rotate.

[Get Shorty]

Some screenshots of how I'm using this...

Attachment 63603 Attachment 63604

[ninjamaster]

thanks m8 will look at this later

[dj_melayu]

Screenshot please

[Get Shorty]

Originally Posted by ninjamaster

thanks m8 will look at this later

Originally Posted by dj_melayu

Screenshot please

I'll include some, but I don't see how that will be helpful. Just imagine any group of DIV's that you would like to show in a random order.

[paulvon]

This is really cool and I am looking forward to using it.

One quick question. If I have fifteen content items for example and want to display just the first three. How do I change the script?

Thank you