thecore7
thecore7

Reputation: 484

js hard to position divs around a circle

I have couple of divs with diffrent classes and contain several child divs - each one represents a guest on the table. Each main div represents restaurant table type . I have prepared jsfiddle

http://jsfiddle.net/rkqBD/

In it I show 2 table types - one is square and the other table type is circle. For both I have the same number of guests with same names but both show different results with same js code. The circle one has arranged divs OK, but on the square one guests names go above each other. This is the js code that order the child divs around the table:

$( document ).ready(function(){
$('.circleBase').each(function(){
var d = $(this).attr("id");
var tbltype = $(this).attr("tbltype");
var elems='';    
var x = 0, y = 0, angle = 0;    
var rot = 0;
if(tbltype==="1"){
    var elems = document.getElementsByClassName('info_container22 square');
    var totContent = $(this).find(elems).size();
    var increase = Math.PI * 2 / totContent;
    for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    x = (115 * Math.cos(angle) + 40);
    y = (95 * Math.sin(angle) + 57);
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}
}    
if(tbltype==="0"){
    var elems = document.getElementsByClassName('info_container22 circle');
    var totContent = $(this).find(elems).size();
    var increase = Math.PI * 2 / totContent;
    for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    x = (115 * Math.cos(angle) + 40);
    y = (95 * Math.sin(angle) + 57);
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;    
}    
  }    
 });        
});   

Please advise what is wrong in the code and why same divs behave diffrent way

thank you in advance for any help or suggestions. And something else - the code above was taken from the net and I welcome any shorter version ..

Upvotes: 0

Views: 374

Answers (1)

Luca
Luca

Reputation: 66

Your square tbltype is set to 0

Upvotes: 2

Related Questions