Random Div Placement...

**Charlie Penrose** · 11-28-2010 05:09 AM

Hello,

I wonder if anyone could help me - I'm a bit lost. I'm trying to use Javascript to place a Div box randomly on a page. I think I just want to use Javascript to alter the 'top' and 'left' settings of the div tag in the CSS... Could anyone tell me how to do this please?

Many thanks!

Charlie

**coothead** · 11-28-2010 07:54 AM

Hi there Charlie Penrose,

and a warm welcome to these forums.

Does this example help...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>random positioned box</title>

<style type="text/css">
html {
    height:100%;
 }
body {
    background-color:#f93;
 }
#randomBox {
    width:322px;
    height:198px;
    border:1px solid #000;
    background-color:#f00;
 }
.pstn {
    position:absolute;
    z-index:99;
 }
</style>

<script type="text/javascript">

function init(){
   var obj=document.getElementsByTagName('html')[0];
   var obj1=document.getElementById('randomBox');

   var w=obj.offsetWidth;
   var h=obj.offsetHeight;

   var l=Math.floor(Math.random()*w);
   var t=Math.floor(Math.random()*h);

if(l>w-obj1.offsetWidth){
   l=w-obj1.offsetWidth;
 }
if(t>h-obj1.offsetHeight){
   t=h-obj1.offsetHeight;
 }
   obj1.style.left=l+'px';
   obj1.style.top=t+'px';
   obj1.className='pstn';
 }

 window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="randomBox">

</div>

</body>
</html>

coothead

**Charlie Penrose** · 11-28-2010 09:49 AM

Fantastic, thanks very much!

**coothead** · 11-28-2010 09:56 AM

No problem, you're very welcome.

**HugoH** · 10-31-2011 05:34 AM

Hello coothead!

This works fantastic.

But I wonder if you can do it with multiple div's?
I couldn't work it out yet so help would be very appreciated.

Thank you!

Hugo

**coothead** · 10-31-2011 08:28 AM

Hi there HugoH,

and a warm welcome to these forums.

You must be a silly webpage aficionado.

I trust that the following code will bring a little smile to your face.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>randomly positioned boxes</title>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    overflow:hidden;
    background-color:#ccc;
 }
#randomBox1,#randomBox2,#randomBox3,
#randomBox4,#randomBox5,#randomBox6 {
    width:322px;
    height:198px;
    border:1px solid #000;
    background-color:#f00;
    border-radius:15px;
    box-shadow:#000 10px 10px 30px;
 }
#randomBox2 {background-color:#0f0;}
#randomBox3 {background-color:#00f;}
#randomBox4 {
    line-height:198px;
    background-color:#f0f;
    margin:20px auto;
    text-align:center;
 }
#randomBox5{background-color:#ff0;}
#randomBox6{background-color:#0ff;}
.pstn {
    position:absolute;
 }
.non-mover{
    position:relative;
 }
</style>

<script type="text/javascript">
var speed=1200;
   var l=[];
   var t=[];
   var obj,w,h,c;  
   var objs=document.getElementsByTagName('div');
   var bit=30;
function init(){
   obj=document.getElementsByTagName('html')[0]; 
   w=obj.offsetWidth;
   h=obj.offsetHeight;
for(c=0;c<objs.length;c++){
if(objs[c].className=='non-mover'){
   objs[c].style.zIndex=Math.floor(Math.random()*w)/2;}
if(objs[c].className!='non-mover'){
   l[c]=Math.floor(Math.random()*w);
   t[c]=Math.floor(Math.random()*h);
   objs[c].style.zIndex=Math.floor(Math.random()*w);
if(l[c]>=w-objs[c].offsetWidth){
   l[c]=w-objs[c].offsetWidth-bit;
 }
if(l[c]<=0){
   l[c]=0+bit;
 }
if(t[c]>=h-objs[c].offsetHeight){
   t[c]=h-objs[c].offsetHeight-bit;
 }
if(t[c]<=0){
   t[c]=0+bit;
 }
   objs[c].style.left=l[c]+'px';
   objs[c].style.top=t[c]+'px';
   objs[c].className='pstn';
   }
  }
setTimeout(function(){init()},speed); 
 }

 window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="randomBox1"></div>
<div id="randomBox2"></div>
<div id="randomBox3"></div>
<div id="randomBox4" class="non-mover">this is a non mover</div>
<div id="randomBox5"></div>
<div id="randomBox6"></div>

</body>
</html>

coothead

**HugoH** · 10-31-2011 09:00 AM

One word: wow

This works like a charm ... and yes: I got quite a big smile on my face right now

Thank you Sir!

**coothead** · 10-31-2011 12:11 PM

No problem, you're very welcome.

Thread: Random Div Placement...

Thread Tools

Display

Random Div Placement...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions