Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random Position <div>?

    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.

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    You may be able to pull of:
    Code:
    ​<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>
    ​
    Last edited by Nile; 06-13-2012 at 04:20 AM.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by toddmanning; 06-13-2012 at 04:08 AM. Reason: didn't see earlier post

  • #4
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Random position of multiple divs

    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...

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 236 Times in 231 Posts
    Hi there tanky,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    <!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

  • Users who have thanked coothead for this post:

    tanky (07-13-2012)

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @ 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 : )

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 236 Times in 231 Posts
    No problem, you're very welcome.

    coothead

  • #8
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    place on the home page.





  •  

    Posting Permissions

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