Randomize the display order of content on my page.
December 3, 2009 Leave a comment
What I needed to do: Randomize the display order of content on my page.
What I found: As the first step, I started to look around to see if someone had already written a javascript for this.
And I found one really good one on dynamic drive. They have just about everything!
http://www.dynamicdrive.com/dynamicindex17/randomcontentorder.htm
Where I was getting stuck: So while this script was working really well, my div’s (that I needed displayed in a random order) had buttons
that sent ajax requests and received html response. And those stopped working.
My own alternate solution: Here’s the solution I came up with. It may not be most optimized, but for the little content on my page, it works very well.
The logic:
1. I defined a set of css classes to absolute position my div’s. Each of these classes ended with a number. For. e.g .cls1, .cls2…and so on.
2. I created a javascript function, that randomly picks a number from a pre-defined array of numbers.
3. I use this random number to apply the css classes and randomly place my div’s on the page.
<style>
#mycontainer {position:relative;} // you need to set this position to relative to have the child div’s position in relation to this.
.cls1 {position:absolute; top:0px;} // position absolute to where you want the div’s on the page.
.cls2 {position:absolute; top:20px;}
.cls3 {position:absolute; top:40px;}
.cls4 {position:absolute; top:60px;}
.cls5 {position:absolute; top:80px;}
.cls6 {position:absolute; top:100px;}
</style>
<script type=”text/javascript”>
function randOrd(){return (Math.round(Math.random())-0.5);}
function J$(eleID){ return document.getElementById(eleID);}
//this is where we assign random classes to our div’s
window.onload=function() {
anyArray = new Array(‘1′,’2′,’3′,’4′,’5′,’6’);
anyArray.sort( randOrd );
J$(‘mydiv1’).className = “cls”+anyArray[0];
J$(‘mydiv2’).className = “cls”+anyArray[1];
J$(‘mydiv3’).className = “cls”+anyArray[2];
J$(‘mydiv4’).className = “cls”+anyArray[3];
J$(‘mydiv5’).className = “cls”+anyArray[4];
J$(‘mydiv6’).className = “cls”+anyArray[5];
}
</script>
<div id=”mycontainer”>
<div id=”mydiv1″>DIV 1</div>
<div id=”mydiv2″>DIV 2</div>
<div id=”mydiv3″ >DIV 3</div>
<div id=”mydiv4″ >DIV 4</div>
<div id=”mydiv5″ >DIV 5</div>
<div id=”mydiv6″ >DIV 6</div>
</div>
FINAL RESULT: Click here to download the html file.