...

View Full Version : Random Position <div>?



freshdude
06-13-2012, 03: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, 04: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, 05: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, 07: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, 10: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, 04: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, 05:02 PM
No problem, you're very welcome. ;)

coothead

aiden_lvmo
11-11-2013, 07:23 PM
HI everybody.
Coothead, I know this post its very old, but you are the only one who write a code very closer to something than I need to do. but I dont know how... I hope you can take this challenge, like a game

I need a div who inside have "x" number of images, (all whith 600px height 250px).
And all the images inside a folder must to be show in this div

I try to use a random sistem like you alrready did, but the only problem its the images will never touch each others.

thanks for you time

Jeffe65er
11-15-2013, 04:59 AM
place on the home page.http://www.bettecets.com/22.jpg
http://www.bettecets.com/23.jpg
http://www.bettecets.com/24.jpg
http://www.bettecets.com/25.jpg
http://www.bettecets.com/26.jpg



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum