title: randomly mapping divs
body: <p>I am creating a new "whack-a-mole" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.</p>
  
  <p>The problem I am having is that because it is completely random, sometimes the "characters" appear overlapped with one another. Is there a way to organize them so that they appear in set places in the container and don't overlap when they appear.</p>
  
  <p>Here I have the code that maps the divs to the container..</p>
  
  <pre><code>    function randomFromTo(from, to) {
          return Math.floor(Math.random() * (to - from + 1) + from);
  }
  
  function scramble() {
      var children = $('#container').children();
      var randomId = randomFromTo(1, children.length);
      moveRandom('char' + randomId);
  }
  
  function moveRandom(id) {
      var cPos = $('#container').offset();
      var cHeight = $('#container').height();
      var cWidth = $('#container').width();
      var pad = parseInt($('#container').css('padding-top').replace('px', ''));
      var bHeight = $('#' + id).height();
      var bWidth = $('#' + id).width();
      maxY = cPos.top + cHeight - bHeight - pad;
      maxX = cPos.left + cWidth - bWidth - pad;
      minY = cPos.top + pad;
      minX = cPos.left + pad;
      newY = randomFromTo(minY, maxY);
      newX = randomFromTo(minX, maxX);
      $('#' + id).css({
          top: newY,
          left: newX
      }).fadeIn(100, function () {
          setTimeout(function () {
              $('#' + id).fadeOut(100);
              window.cont++;
          }, 1000);
      });
  </code></pre>
  
  <p>I have a fiddle if it helps.. <a href="http://jsfiddle.net/pUwKb/8/">http://jsfiddle.net/pUwKb/8/</a> </p>