Create any number of divs inside a main div and asssign positions at runtime using jQuery

Question

I want to place many divs in a form of a circle. I will use relative positioning for the divs. For a start I am trying to place four divs around the circle

div 1 - top 50, left 100

div 2 - top 100, left 150

div3 - top 150, left 100

div 4 - top 100, left 50

I will be calculating the values in the actual case and setting them but for now it does not matter.Is it possible to create four divs (in an actual case it will be a large number)inside an outer div. But I need to assign differenet sequential ids to these divs and place them at the positions menntioned.

I will have to calculate and then assign top and left positions using script. So could you show how to assign these values using script.

Answer 1

<script>
    $(document).ready(function() {
        "use strict";

        var NR_OF_ITTERATIONS = 4,
            RADIUS = 40,
            i,
            $wrapper = $("#wrapper");

        for(i=0;i<NR_OF_ITTERATIONS;i+=1) {
            $wrapper.append(
                $("<div/>")
                    .css({
                        top: /* Top position */,
                        left: /* Left position */
                    });
            );
        }
    };
</script>

<style>
    ​#wrapper > div {
        position: absolute;
        border: 1px solid black;
        width: 40px;
       height: 40px;        
    }​
</style>

<div id="wrapper"></div>

Answer 2

Here is the code to generate divs. Put your top and left style in style attr of the div. You can ignore the random number. I used it just as place holder.

 <div id="outterDiv" class="outterDivision"> </div>​


var html = '';

        var i;
        for(i=0;i<=4;i++) {
           var Random_Number = Math.ceil(Math.random()*500+i);
            html +='<div id="inner'+i+'" class="anything" style="top:50px; left:100px;">'+Random_Number+'</div>';         
        }
        $('#outterDiv').html(html);

Answer 3

This is really a nice question, as it requires also some math backgrounds.

So, first, let's say what we are going to do: 0. you must decide the center of the circle and its radius 1. we must decide at which angle, on a circle, we should put our divs 2 we should then make a function which, given the angle, gives you the position of the div

So, what do we do wth all that?

1. decide which should be the center of the circle (if it has to stay in the center of the page

2. decide the radius (could be calculated as well according to windows dimension)

3. some trigonometry: to understand the angle iterval, just divide 360° by the number of divs: if you have two divs, then you angle interval is 360/2=180 (ugly). If you have 10 divs your intrval is 36°

Very good, now we're ready to code.

1. get center: I just redirect you to t it at this stackoverflow link

2. use the same code to decide tha radius

3. the function which takes, as input, the number of divs, the radius, the center, and gives you back an array with the divs coord. the center is a 2 places array (x and y). In the function we make some adjustment to output the actual postion of the div.

.

 function getCoords(divNum, radius, center){
   var num= divNum;
   var angleInt= (6.28/num);
   var outArray=[];
   for (i=0;i<divNum;i++){
    outArray.push([(Math.cos(angleInt*i)*radius+center[0]),(Math.sin(angleInt*i)*radius+center[1])]);
   }
  return outArray;
}

Well, it's done, now you can place your divs with any jquery method, like in this example:

var localization=getCoords(10,200,[400,400]);

var i=1;
for (var element in localization){
    var posTop=localization[element][0];
    var posLeft=localization[element][1];
    var element= $("<div class='inner'>"+i+"</div>");
    $(element).css({ position: "absolute",
            marginLeft: 0, marginTop: 0,
            top: posTop, left: posLeft });
    $("body").append(element);
   i=i+1;

}

hope this helps