Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration.
In the provided example, you will find two table types: square and circle. While both tables host an equal number of guests with identical names, they exhibit different outcomes despite sharing the same javascript code. The circular table displays properly arranged divs, whereas on the square version, guest names overlap one another.
$( 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;
}
}
});
});
I seek guidance on rectifying the issues in the code and understanding why similar divs behave differently.
Thank you in advance for any assistance or recommendations. Additionally, if there is a more concise version of the above code available online, please share it.