HowTo JavaScript/jQuery place divs in a circle, calculate a cirlce etc.

So,

I was working with my father, a physicist and mathematician, who wants to have a little math example done in javascript. We haven’t finished the meat and potatoes of the project, but one hurdle was the necessity to place 8 divs in a circle on the page. This is a variation on the Tirgrams and Clifford Algebras demonstration that comes with the Mathmatics software Wolfram. Essentially this displays the trigrams in a clock formation, right to left around a circle.

I looked around for a few examples and none of them seemed to work out the way I wanted them too, so I asked him to help and this is what we came up with.

As requested, here’s some code you can copy and paste into a page, as long as you have included jQuery, that should just work for you.

About Jason

I am a 31 year old programmer living in the south of France. I currently work actively in the fields of Ruby/PHP/Javascript and server/website administration.
This entry was posted in Javascript Tutorials, Tips and Tricks, Topics and tagged , , , . Bookmark the permalink.
  • Chand Jaan

    It’s not unusual for the layout of a Web page to feature multiple columns. Unfortunately, when creating this layout while using general containers, you can end up with columns of uneven height, depending on their content. This looks very unprofessional.

    http://www.handycss.com/how/how-to-calculate-height-and-width-of-a-div/

    • Jason

      Thanks for your input, but this snippet was never intended for any purpose aside from the method of calculating where to put them on the circle. The code obviously assumes little complexity of layout by getting the window width and height, and also assumes that all divs are filled with items of equal width and height.

      The script was used to place iChing trigrams in a circle. You’ll notice that they have fixed width/fixed height. I don’t think that it would be too much of an issue to modify the code to handle variable widths, as the subtraction of the fixed width is clearly commented.

      Regardless of its obvious shortcomings, I hope it was helpful in your search 🙂

  • Baliwsteve

    that’s really great, shame it doesn’t work without the trigram class – perhaps you should include it in the source so we can see what the results are without having to build this class without knowing anything about it.

    • Jason

      Hey Bro,

      I updated the code with a working example. Have fun!