How to position elements as a curve using jQuery.each ()

Question

This is a slightly unusual request, because I know that there are plugins for placing elements along the bezier curve, however, for a variety of reasons that I will not go into, these methods are not applicable for this application.

I need to iterate through a set of elements using jQuery of each function and emulate a curve that has a curve from left to bottom up.

Also: -

O O O O O O O 

I need to save the number of elements in a variable using .size ()

And from this number, do the calculation to work out the css left property, which depends on the index of the element.

Math, unfortunately, is not my forte, and I'm fixated on the formula used, and how would I continue to iterate through the elements using jQuery.each () and apply the css changes for each element.

The number of elements will dynamically change, so both the number of elements and the index of each element should be included in the formula.

Can someone give me at least a starting point regarding how I will avoid coding this in jQuery? (or using position addon in jqueryUI)

Answer 1

This is a bit complicated. but you must make sure that all elements have a position:

relative , absolute or fixed to place them like this.

Something like this: http://jsfiddle.net/maniator/PPRKF/

Answer 2

There is actually a jQuery plugin for this jCurvy

Demo Screenshot

---

It even comes with a nice design interface for generating point codes so that you can draw your elements the way you want here http://jcurvy.com/design.html?design=1

Just drag test1 , test9 and red 1 points to form the curve the way you want, and the code is generated above for use with the plugin.