.appendTo inside circle div

Question

I am trying to develop something as part of a bigger project but stuck very early on unfortunately.

I am trying to get the dynamically created divs to only be within the #circle div and limit them to 20.

Here is a codepen...

'http://codepen.io/phillip_vale/pen/QENmMN?editors=1111'

check http://codepen.io/anon/pen/xOObEm only remaining is `div` is a square and we applied radius. I changed `#circle` position `relative` and change `left` — Parth Trivedi, Jun 15 '16 at 05:09
This question is likely to close in its present condition, since it does not contain the code in the actual post. Please edit into the question the three code blocks (the codepen.io link underneath them additionally is fine). — halfer, Jun 16 '16 at 20:57

score 0 · Answer 1 · edited May 23 '17 at 10:33

Try something like this

You need to test if the dot is in the circle

function makeDiv() {

var divsize = Math.floor((Math.random() * 20) + 4);
  var a = Math.random();

  $newdiv = $('<div class="test">').css({
    'width': divsize + 'px',
    'height': divsize + 'px',
    'opacity': a
  });

  var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
  var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
 if((posx-200)*(posx-200)+(posy-200)*(posy-200) < 200*200) {

  $newdiv.css({
    'position': 'absolute',
    'left': posx + 'px',
    'top': posy + 'px',
    'display': 'none'
  }).appendTo('#circle').fadeIn(1000, function() {
    makeDiv();
    console.log(posx, posy);
  });
   return 1
    }
     return 0;
}
var x = 0
 while(x < 20) {
   x = x+makeDiv();
     }

http://codepen.io/anon/pen/RRRNoN?editors=1111

or this for animation:

function makeDiv() {

var divsize = Math.floor((Math.random() * 20) + 4);
  var a = Math.random();

  $newdiv = $('<div class="test">').css({
    'width': divsize + 'px',
    'height': divsize + 'px',
    'opacity': a
  });

  var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
  var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
 if((posx-200)*(posx-200)+(posy-200)*(posy-200) < 170*170) {

  $newdiv.css({
    'position': 'absolute',
    'left': posx + 'px',
    'top': posy + 'px',
    'display': 'none'
  });
   return $newdiv
    }
     return 0;
}
var x = 0
 while(x < 20) {
 var div = makeDiv();
if(div !=0) {
   x = x+1;
   div.appendTo('#circle').delay(1000*x).fadeIn(1000);
  }
     }

http://codepen.io/anon/pen/vKKEJO?editors=1111

for more info

.appendTo inside circle div

1 Answers1