www.webdeveloper.com
Results 1 to 8 of 8

Thread: Random Div Placement...

  1. #1
    Join Date
    Nov 2010
    Posts
    5

    Random Div Placement...

    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

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    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

  3. #3
    Join Date
    Nov 2010
    Posts
    5
    Fantastic, thanks very much!

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.

  5. #5
    Join Date
    Oct 2011
    Posts
    3
    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

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    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

  7. #7
    Join Date
    Oct 2011
    Posts
    3
    One word: wow

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

    Thank you Sir!

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles