StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The good news is it will be easier with a square table but you need a different algorithm for that:</p> <p>lines: x = (120 * Math.cos(angle) + 40); y = (115 * Math.sin(angle) + 60); .... and var rot = 88 + (i * (360 / totContent));</p> <p>should be changed. plus you shouldn't have angle += increase; since it will be calculated in another way</p> <p>In more detail:</p> <p>You have a square table so you will have 4 distinct rotation angle 0,90,180,270 left,bottom,right,top side sespectively Secondly let "side_num" be a variable how many people sit on one side</p> <p>As we loop through 'guests' array 'j' is increased by 1 as 'i' is until it reaches 'side_num' if so 'j' becomes 0 and angle as well as x, y-s are changed as well.</p> <p>Now calculate which side a person will sit by: (j mod 'side_num') ( since we have 4 side of the table)</p> <p>x and y's should have calculated based on (j mod 'side_num') too so left side will have the same x values etc.</p> <p>I will correct the code but this is the theory behind it</p> <p><a href="http://jsfiddle.net/Krisztian123/hyGrj/32/" rel="nofollow">http://jsfiddle.net/Krisztian123/hyGrj/32/</a> Almost done:</p> <pre><code>$( document ).ready(function(){ $('.circleBase').each(function(){ var d = $(this).attr("id"); var tbltype = $(this).attr("tbltype"); if(tbltype==="1"){ border = "1"; }else { border = "999";} var elems=''; var x = 0, y = 0, angle = 0; var rot = 0; if(tbltype==="1"){ var elems = document.getElementsByClassName('info_container22 square'); //alert(elems.length); var side_num = 4; //how many seats per side // side_num -= 1; //technically it should be 3 var j = 0; var angles=['270','180','270','90']; var xs=[0,38,0,0]; var ys=[38,0,0,0]; var x_fix=[-50,0,0,0] var y_fix=[-30,130,0,0] var cur_side = 0; //(0,1,2,3 == left, bottom,right,top) var totContent = $(this).find(elems).size(); var j = -1; //to be equal to loop index for (var i = 0; i < totContent; i++) { var elem = elems[i]; j++; // like (0,1,2,3,4,0,1,2...) if (j == side_num) { //next side j = 0; cur_side++; if (cur_side == 4) { alert("places are full next table"); } } x = x_fix[cur_side] + j*xs[cur_side]; y = y_fix[cur_side] + j*ys[cur_side]; elem.style.position = 'absolute'; elem.style.left = x + 'px'; elem.style.top = y + 'px'; var rot = angles[cur_side]; var img = $(elems[i]).find('.img'); img.css('-moz-transform', "rotate("+rot+"deg)"); img.css.MozTransform = "rotate("+rot+"deg)"; img.css('-webkit-transform', "rotate("+rot+"deg)"); img.css('-o-transform', "rotate("+rot+"deg)"); img.css('-ms-transform', "rotate("+rot+"deg)"); img.css('zIndex', "10"); } } }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload