JavaScript Forum

**youlichika** · 11-12-2010, 04:57 PM

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.

Code:

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

**alexsts** · 04:42 PM

You can use random to switch number and then use Switch in JavaScript to load CSS you want.
Pretty good idea you can find in articles there:
http://www.howtocreate.co.uk/tutoria...ascript/domcss

**JeremyMiller** · 11-26-2010, 05:02 PM

Here's something to play with:

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Randomly Positioning Boxes On Page Load</title>

    <script type="text/javascript">
      function init() {
        //Set variables
        var i=1, //counter index
            corners={"top":0,
                     "left":0,
                     "bottom":300,
                     "right":300}, //Set the area within which the boxes' top-left corner will be positioned
            a_box; //variable to hold reference to a box
        //Search for all boxes with an id of box_#
        while(a_box = document.getElementById('box_'+i)) {
          a_box.style.left = (corners.left + (Math.random() * (corners.right - corners.left))) + "px";
          a_box.style.top = (corners.top + (Math.random() * (corners.bottom - corners.top))) + "px";
          i++;
        }
      }
    </script>
    <style type="text/css">
      .box_random {
        position:absolute;
        border:1px #000 solid;
        width:100px;
        height:100px;
      }
    </style>
  </head>
  <body onLoad="init();">
    <div class="box_random" id="box_1">Box 1</div>
    <div class="box_random" id="box_2">Box 2</div>
    <div class="box_random" id="box_3">Box 3</div>
  </body>
</html>

**alexsts** · 11-27-2010, 10:36 AM

Jeremy, Nice coding and fun to use.
BUT...
Well, honestly I agree with old story that: when you give fish to a man you feed him for a day.
But if you give him a fishing rod and teach him how to use it-- he is set for life...

**JeremyMiller** · 11-27-2010, 03:50 PM

Welcome to the forum Alex.

Take a look at the OP and you'll see:

An attempt to try the problem.
A clear lack of understanding about the DOM.
And, some kind of attempt to actually learn (or there wouldn't be a Math.random() * 3).

In your response, the OP is guided to a tutorial on DOM CSS and given guidance to 'find a pretty good idea'. I'm sorry, but when I fish, I like a little more guidance on how to actually knot the line onto the hook as opposed to a line amounting to, "get some line, a hook, a book and an idea."

Now, let's take a critical look at what I posted -- Actually, hold the presses! That's exactly what I wanted to the OP to do: "take a critical look".

It is well known that the best way, for most, of learning a foreign language is via immersion. I see no reason why that cannot work for coding as well.

My code provided:

A probably-unfamiliar doctype for the OP.
The answer to the question.
Comments to guide along the way -- without giving a full explanation.
A bit more detail than was asked in the OP, requiring the OP to look at the code to truly achieve what was desired and in the process, learn more about how it all works.
Inline JSON for variable declaration.
Implicit type checking via a loop based on the assignment operator's return value.
... Well, I think you're getting the idea: An awful lot in but a few lines of code which will allow a number of opportunities to learn.

While some may think a link to read up on things is helpful; I oftentimes "show" in a manner which requires depth of thought to use and understand: Is not a picture worth 1000's words?

BTW: I really don't want to have this thread diverge from the OP and, while answering you, kept this post focused on the code provided and, therefore, on topic. If you really want to have a discussion about "how" people help, then please open a thread in the general discussion area and invite me to join.