jquery - Responsive Circle inner circle -

i trying create responsive circle inner circle in in jsfiddle. if resize page want outer circle , inner circle adjust automatically.

how achieve behaviour?

here tried: http://jsfiddle.net/ineffablep/x03f61db/

code:

function createfields() {    $('.field').remove();    var container = $('#container');    (var = 0; < +$('input:text').val() + 1; i++) {      $('<div/>', {        'class': 'field',        'text':      }).appendto(container);    }  }    function distributefields() {        var fields = $('.field'),      container = $('#container'),      width = center.width() * 2,      height = center.height() * 2,      angle = 0,      step = (2 * math.pi) / fields.length;    var radius = width / 2;    var containerlength = $('input:text').val();    angle = step * (containerlength - 1);      fields.each(function() {        var x = math.round(width + radius * math.cos(angle));      var y = math.round(height + radius * math.sin(angle));      $(this).css({        right: x + 'px',        top: y + 'px'      });      angle -= step;      });  }  var center = $('#center');    $(window).resize(function(height) {      $('#container').width($(window).height() * 0.9)    $('#container').height($(window).height() * 0.9)    var width = $('#container').width() * 0.4;    console.log("width", $('#container').width());    console.log("height", $('#container').height());    var radius = width / 2;    width += 'px';    radius += 'px';    center.css({      width: width,      height: width,      '-moz-border-radius': radius,      '-webkit-border-radius': radius,      'border-radius': radius    });      createfields();    distributefields();    // rest of code font-size setting etc..  });    $(window).resize();      $('input').change(function() {    createfields();    distributefields();  });

body {    padding: 2em;  }  #center {    position: absolute;    background: #00a8d9;    width: 50%;    height: 50%;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    border: 3px solid #000;    top: 55%;    left: 27%;  }  .field {    width: 20px;    height: 20px;    position: absolute;    color: #f00;  }

number of fields:  <input type="text" value="60" />  <div id="container">    <div id="center"></div>    </div>

here exemple on how can handle this.

---

what did first, add css rule #container :

#container{     position:relative;     float:right; } 

then, edited top , left css values #center element, , added box-sizing attribute (to prevent border crashing width behavior) :

#center {      position:absolute;     background: #00a8d9;     width: 50%;     height: 50%;     -moz-border-radius: 50%;     -webkit-border-radius: 50%;     border-radius: 50%;     border:3px solid #000;     top:100%;     left:0%;     box-sizing:border-box; } 

---

i found center of fields circle @ bottom-left corner of #container, reproduce behavior #center element. that's why positioned top:100% , left:0%, in order centered on bottom-left corner, need add negative margins (half #center size), calculated depending on #container size :

$(window).resize(function(height) {      $('#container').width($(window).height()*0.9);     $('#container').height($(window).height()*0.9);     var width = $('#container').width() * 0.4;     var radius = width;     var toppos = (width/2)*(-1.2);     var rightpos = (width/2)*(-1.2);     radius += 'px';     toppos+="px";     rightpos+="px";     $('#center').css({         left:'0%',         top: '100%',         'margin-top':toppos,         'margin-left':rightpos,         '-moz-border-radius' : radius,         '-webkit-border-radius' : radius,         'border-radius' : radius     });      createfields();     distributefields();     // rest of code font-size setting etc.. }); 

ps : i found center of fields circle @ bottom-left corner of #container | that'is not case, dealing pixels. way positioning fields may causing small gap. have find way adapt margins using same logic positioning fields