I am trying to generate 10 concentric circles from one object with jQuery using a for loop.

I've written this in my jsfiddle /, which looks like this:

<div class="circle"></div>

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

How can I make this right? It seems to increase in width and height when I add the variable by any number such as 30 but doesn't bring out the result that it should.

I am trying to generate 10 concentric circles from one object with jQuery using a for loop.

I've written this in my jsfiddle http://jsfiddle/JoshuaWaheed/NJkda/2/, which looks like this:

<div class="circle"></div>

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

How can I make this right? It seems to increase in width and height when I add the variable by any number such as 30 but doesn't bring out the result that it should.

• javascript
• jquery
• html
• css

• perhaps making it sleep... or deferring a little somehow is what you need... most likely it just goes too quickly to the last one. I mean, one div, one css {width + height} = one circle, right? – d'alar'cop Commented Sep 8, 2013 at 17:26
• I am not sure what you are trying to do. Can you explain it a little bit more? – putvande Commented Sep 8, 2013 at 17:27
• I'm trying to create a circles within or around circles, which results with 10 circular shapes. From Plato's ment, I'm getting the feeling that I might need to recreate the object with javascript 10 times but at a larger size. I'll try that and will see. – Joshua Waheed Commented Sep 8, 2013 at 17:35

4 Answers 4

You need to define the ten variable outside the loop and create a new element for each ring.

For example,

var ten = 10;
var tgt = $('body');
for(var count = 0; count < 20; count++){
    ten += 30;
    tgt.append('<div class="circle" style="width:'+ten+'px;height:'+ten+'px;margin:-'+(ten/2)+'px 0 0 -'+(ten/2)+'px"></div>');
};

Notice that I also define the margin inside the javascript, since it also needs to change.

Your CSS needs a small change too;

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid #666666;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

I have set the border radius to 100% instead of a pixel value, and removed the margin and width/height, which is unnecessary.

First, move the variable declaration outside the loop. Second, set the border-radius value to 50%. Last, create a new element for every circle. Your code revisited:

/** 
 * css radius:
 *  -webkit-border-radius: 50%;
 *  -moz-border-radius: 50%;
 *  border-radius: 50%;
 */
var ten = 10;
for(var count = 0; count < 20; count++){
   ten = ten + 10;
   var c = $('<div class="circle"></div>').appendTo('body');
   c.css({"width":ten+"px","height":ten+"px"});
};

Modified jsFiddle

First off you are modifying your only existing circle repeatedly once per for loop.

Second, every iteration you are setting the height and width to 40px.

Third, you may want to use SVG graphics which offer native support for stuff like this. Here is an example with SVG:

http://jsfiddle/5c6zy/1/

//HTML
<svg id='circles' xmlns="http://www.w3/2000/svg" version="1.1"></svg>

//Javascript
var centerX = 250;
var centerY = 250;

for(var count = 0; count < 20; count++){
    var radius = count * 10;
    makeAndPlaceCircle(radius);
};

function makeAndPlaceCircle(r){
  // thx m93a: http://stackoverflow./a/16489845/1380669
  var circles = document.getElementById('circles'); //Get svg element
  var newElement = document.createElementNS("http://www.w3/2000/svg", 'circle'); 
  newElement.setAttribute("cx", centerX);
  newElement.setAttribute("cy", centerY);
  newElement.setAttribute("r", r);
  newElement.style.stroke = "#000"; //Set stroke colour
  newElement.style.strokeWidth = "2px"; //Set stroke width
  newElement.style.fill = "none"; //Set stroke colour
  circles.appendChild(newElement);
};

//No CSS required, but you can define CSS classes and set them on the SVG circle elements, if you would like to e.g. change stroke, fill

My example ma be interesting http://jsfiddle/gxM84/2/

var n=5; //set number of circles 

increasing radius here

padding: 15px;