Randomly arrange <div> elements onload.

@heybrianMar 01.2010

Hi everyone,
onload of this page: ~~[url]~~http://www.heybrian.com/travels/[/url]
I would like the flags (each in it’s own <div> tag) to randomly arrange.
Now, they are in alphabetical order.
How can I do this with? Javascript would be my best bet, but I am at odds for how to do this?
I’ve searched the web to no avail so far.

Thanks so much!

Brian

to post a comment

JavaScript

@Gozzy82Mar 02.2010 — #hey you can do something like:

<i>
 </i>function fisherYates( myArray ) {
 var i = myArray.length;
 if ( i == 0 ) return false;
 while ( --i ) {
 var j = Math.floor( Math.random() * ( i + 1 ) );
 var tempi = myArray[i];
 var tempj = myArray[j];
 myArray[i] = tempj;
 myArray[j] = tempi;
 }
 }
 
 function randomify(){
 var container  = document.getElementById('flags');
 var divs = [];
 
 for(var i = 0, c = container.getElementsByTagName('div'); i &lt; c.length; i++){
 divs[i] = c[i];
 }
 
 // randomify div array
 fisherYates(divs);
 
 // remove children from container
 while(container.firstChild)container.removeChild(container.firstChild);
 
 for(var i = 0, len = divs.length; i &lt; len; i++){
 container.appendChild(divs[i]);
 }
 // done
 }

you can call that function on window.onload (window.onload = randomify? but its nicer to do this serverside so people dont see the flags changing position.

@heybrianauthorMar 02.2010 — #Thanks Gozzy82, that worked great. I created a button to shuffle the flags instead so people wouldn't see the shuffle after load--But,

How do you suggest doing this on the server side so the page randomly loads without people noticing the javascript? php?

Thanks!

@Gozzy82Mar 03.2010 — #i dont know php but am guessing you build that flags table from an array

before you loop that array and echo out the elements in php you randomize that array first.

http://php.net/manual/en/function.shuffle.php < shuffle should work but i don't know for sure because i like i said i dont know php

@heybrianauthorMar 03.2010 — #I'm not that good at PHP myself but will research further;

Do you have any other server-side code ideas to make this work? perl, etc.

Thanks again for the javascript; let me know if you ever have any travel questions for asia or africa.

brian

Randomly arrange <div> elements onload.

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Randomly arrange <div> elements onload.

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴