Random Position <div>?

freshdude

06-13-2012, 02:58 AM

Is there a way to have a div be located in a different position (top:Xpx, left:Xpx) everytime you load a page?

I have a couple graphics that I want to appear in random locations on a website any place on the home page.

Nile

06-13-2012, 03:26 AM

You may be able to pull of:

<div id="random">Blah</div>

<script type="text/javascript">
var randomlyPlace = function(el){
el.style.position = "absolute";
el.style.top = Math.floor(Math.random()*document.body.clientHeight);
el.style.left = Math.floor(Math.random()*document.body.clientWidth);
};

randomlyPlace(document.getElementById('random'));
</script>

toddmanning

06-13-2012, 04:07 AM

the only way I know of doing that would be to use javascript. Here is something I threw together for you. Maybe someone with more experience can point out some improvements on my code.

<!doctype html>
<html>
<head>
<script type="text/javascript">

function init() {
var xmin = 0;
var xmax = 640;
var ymin = 0;
var ymax = 640;

var xCoord = Math.floor((Math.random()*xmax)+xmin);
var yCoord = Math.floor((Math.random()*ymax)+ymin);

var xCoordStr = xCoord.toString() + "px";
var yCoordStr = yCoord.toString() + "px";

document.getElementById("randomPlacement").style.left = xCoordStr;
document.getElementById("randomPlacement").style.top = yCoordStr;

}
</script>
</head>

<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p>Random Placement of text</p>
</div>
</body>
</html

tanky

07-07-2012, 06:03 PM

I would like to use toddmanning's script, wich works perfectly (and thank you for that), but with multiple divs.
How do I manage to do that?
I'm totally new to javascript.

I've tried to change the

document.getElementById("randomPlacement").style.left = xCoordStr;
document.getElementById("randomPlacement").style.top = yCoordStr;

to

document.getElementByName("randomPlacement").style.left = xCoordStr;
document.getElementByName("randomPlacement").style.top = yCoordStr;

and gave a name="randomPlacement" to the divs

without sucess...

coothead

07-07-2012, 09:57 PM

Hi there tanky,

and a warm welcome to these forums. ;)

Try it like this...
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title></title>

<style>
html,body {
height:100%;
margin:0;
background-color:#f0f0f0;
}
.random {
position:absolute;
padding:10px;
border:1px solid #666;
background-color:#fff;
box-shadow:4px 4px 4px #999;
}

#r1{ width:100px; }
#r2{ width:200px; }
#r3{ width:300px; }
#r4{ width:400px; }

</style>

<script>

function init(){

w=document.body.offsetWidth;
h=document.body.offsetHeight;
rd=document.getElementsByTagName('div');

for(c=0;c<rd.length;c++) {
if(rd[c].className=='random') {
xCoord=Math.floor(Math.random()*w);
yCoord=Math.floor(Math.random()*h);

if(xCoord>=w-rd[c].offsetWidth-10){
xCoord=w-rd[c].offsetWidth-10;
}
if(xCoord<=10){
xCoord=10;
}

if(yCoord>=h-rd[c].offsetHeight-10){
yCoord=h-rd[c].offsetHeight-10;
}
if(yCoord<=10){
yCoord=10;
}

rd[c].style.left=xCoord+'px';
rd[c].style.top=yCoord+'px';
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div class="random" id="r1">box one</div>
<div class="random" id="r2">box two</div>
<div class="random" id="r3">box three</div>
<div class="random" id="r4">box four</div>

</body>
</html>

coothead

tanky

07-13-2012, 03:52 PM

@ coothead

Sorry for the time it took me to reply!

That's it! Exactly!
Thank you so much!

You've been really helpful!
I will certainly come back to you for future projects : )

coothead

07-13-2012, 04:02 PM

No problem, you're very welcome. ;)

coothead