y u no do it?

Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

Starts at just \$1 per CPM or \$0.10 per CPC.

# How to use Math random() distribution three div?

Discussion in 'JavaScript' started by youlichika, Nov 12, 2010.

1. #1
I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
I think Math random() can solve this problem, but how to do that? Thanks.

``````
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script>
Math.floor(Math.random()*3)+1;
...
</script>
``````
HTML:

Nov 12, 2010 IP
2. ### Cash NebulaPeon

Messages:
1,197
67
0
Trophy Points:
0
#2
Use absolute positioning, with random values for top and left.
``````
<html>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
width: 300px;
}

.box {
height: 50px;
position: absolute;
width: 50px;
}

#div1 { background: #f00; }
#div2 { background: #0f0; }
#div3 { background: #00f; }
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
<div id='div1' class='box'></div>
<div id='div2' class='box'></div>
<div id='div3' class='box'></div>
</body>
</html>
``````
Code (markup):

Last edited: Nov 13, 2010
Nov 13, 2010 IP
3. ### youlichikaGreenhorn

Messages:
74
0
0
Trophy Points:
16
#3
Thanks Cash, this is a random effection. I am sorry, may be I did not say clearly in english. the three divs position will be change is meaning like: div1{float:left;width:100px;height:100px;left:0;top:0} div2{float:left;width:100px;height:100px;left:100px;;top:0} div3{float:left;width:100px;height:100px;left:200px;top:0}, when I refresh the page, the three divs position will be change, div1 go to div2's position, div2 go to div3's position, div3 go to div1's position...

Nov 13, 2010 IP
4. ### Cash NebulaPeon

Messages:
1,197
67
0
Trophy Points:
0
#4
Something like this?
``````
<html>
<style type='text/css'>
#random {
height: 100px;
margin: 50px auto;
position: relative;
width: 300px;
}

.box {
height: 100px;
position: absolute;
top: 0;
width: 100px;
}

#div1 { background: #f00; }
#div2 { background: #0f0; }
#div3 { background: #00f; }
</style>
<script type='text/javascript'>
function setDivPos() {
var box1, box2, box3;
box1 = Math.ceil(Math.random()*3);
do {
box2 = Math.ceil(Math.random()*3);
} while (box2 == box1);
do {
box3 = Math.ceil(Math.random()*3);
} while (box3 == box1 || box3 == box2);
document.getElementById('div'+box1).style.left = '0';
document.getElementById('div'+box2).style.left = '100px';
document.getElementById('div'+box3).style.left = '200px';
}
</script>
<div id='random'>
<div id='div1' class='box'></div>
<div id='div2' class='box'></div>
<div id='div3' class='box'></div>
</div>
</body>
</html>
``````
Code (markup):

Nov 13, 2010 IP
5. ### youlichikaGreenhorn

Messages:
74
0
0
Trophy Points:
16
#5
``````
<html>
<style type='text/css'>
#random {
height: 100px;
margin: 50px auto;
position: relative;
width: 300px;
}
#div1 { width:100px;height:100px; float:left;}
#div2 { width:100px;height:100px; float:left;}
#div3 { width:100px;height:100px; float:left;}
</style>
<body>
<div id='random'>
<div id='div1' ></div>
<div id='div2' ></div>
<div id='div3' ></div>
</div>
<script>
var index = Math.floor(Math.random()*6);
var ids = [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]][index];
document.getElementById('div'+ids[0]).innerHTML = 'aaa';
document.getElementById('div'+ids[1]).innerHTML = 'bbb';
document.getElementById('div'+ids[2]).innerHTML = 'ccc';
</script>
</body>
</html>
``````
Code (markup):
But I find all the Math.random() should make a suppose first. It is hard to add one more divs. If the divs number add into 6, there should be write a long long javascript code to suppose how to distribution all the possibility of divs positions. Is it right?

Nov 14, 2010 IP