SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to use Math random() distribution three div?

    I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
    I think Math random() can solve this problem, but how to do that? Thanks.

    HTML Code:
    <div id="div1">...</div>
    <div id="div2">...</div>
    <div id="div3">...</div>
    <script>
    Math.floor(Math.random()*3)+1;
    ...
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I remember doing this exercise as an assignment during a course that I was taking.

    All the best with your studies.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ,are u still study this?
    shack hands

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by youlichika View Post
    Hi ,are u still study this?
    shack hands
    No, that was as a part of a Web Design & Programming course from around 5 years ago.

    The purpose of the exercise is to help you learn how to use loops and some of the scripting methods.

    You'll find though that it's much harder for you to learn when you have the answers just given to you.

    A little bit of work spent actually learning about this stuff, does pay off in the end.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by youlichika View Post
    I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
    I think Math random() can solve this problem, but how to do that? Thanks.
    something similar to this:

    1) for each div generate a random integer between the min and max x position you want the div in

    2) for each div generate a random integer between the min and max y position you want the div in

    3) on page load, use javascript to set the appropriate style properties of each div to their values in 1) and 2) to position the divs

    I can't help much more without actually writing some code.

    But of you post the code you have so far we can try to help you debug it if you get stuck.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks ,I find the demo.
    Code:
    <script type="text/javascript">
    var order = [1, 2, 3]  // declare as global, and this is the div number
    var out = ""  // output to html
    var rand      // random number variable to be used in the loop
    while (order.length>0) {
      rand = getRandom()
      out += "<div id=\"div"+rand+"\">Displaying Div "+rand+"</div>"
    }
    document.write(out)
    
    function getRandom() {
      var res = null
      if (order.length==0) { res = null }  // no random, shouldn't be called in this example
      else if (order.length==1) {  // last one left, just return the value inside it
        res = order[0]
        order.pop()
      }
      else {  // get a random element from the array
        var orderLen = order.length
        var rand = Math.floor(Math.random()*orderLen)
        // swap the selected random one with the last element,
        // then get rid of the element
        res = order[rand]
        order[rand] = order[orderLen-1]
        order[orderLen-1] = res
        order.pop()
        // you could check whether the random is the last element and don't need to do swapping,
        // but it would not speed up that much anyway.
      }
    
      return res  // return the random
    }
    </script>

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that might be what you want but it's not what you asked for.

    you asked for a random distribution not a random ordering of display

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    em... you are right, for my careless, this is not use Math random(), it just random the div orders. maybe I shall still looking for the correct one.

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the demo code you posted does use Math.random but to just randomly order the divs.

    when you said distribution in your original post I thought you meant you wanted to randomly position the divs in terms of their positions from the top and left margins of the browser window.

    it wasn't clear what you meant by distribution.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by youlichika View Post
    em... you are right, for my careless, this is not use Math random(), it just random the div orders. maybe I shall still looking for the correct one.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Randomise position of specified existing elements of a common parent</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
    <style type='text/css'>
    
    div{border:solid #f00 1px; width:30%}
    
    </style>
    </head>
    <body>
     <div id="div1">FIRST</div>
     <div id="div2">SECOND</div>
     <div id="div3">THIRD</div>
     
    <script type='text/javascript'>
    
    function orderElems()
    {
     var elems = [], tempElem, pn, args = orderElems.arguments;
     
     for( var i = 0, len = args.length; i < len; i++ )
      ( pn = ( elems[ i ] = tempElem = document.getElementById( args[ i ] ) ).parentNode).removeChild( tempElem );
      
     for( var i = len - 1, idx, tmp; i > -1; i-- )
     { 
      while( ( idx = Math.floor( Math.random() * len ) ) == i )
      ;
      tmp = elems[ i ];
      elems[ i ] = elems[ idx ];
      elems[ idx ] = tmp;
     } 
     
     for( var i = 0; i < len; i++ )
      pn.appendChild( elems[ i ] );
    }
    
    orderElems( 'div1', 'div2', 'div3' );
    
    </script>
    </body>
    </html>
    Tab-indentation is a crime against humanity.


Tags for this Thread

Bookmarks

Posting Permissions

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