Question

This is a slightly unusual request as I know there are plugins out there to position elements along a bezier curve, however for a variety of reasons that I won’t go into, these methods are not applicable for this application.

I need to iterate through a set of elements using the jQuery each function and emulate a curve that curves to the left, from bottom to top.

Like so:-

  O
 O
O
O
O
 O
  O

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

And from this number perform a calculation to work out the css left property, dependant upon the index of the element.

Math is unfotunately not my strong point and I am stuck on the formula to use, and how I would go about iterating through the elements using jQuery .each() and apply the css changes to each element.

The number of elements will be changing dynamically which is why the both the number of the elements and the index of each element will need to be included in the formula.

Can anyone give me at least a starting point as to how I would go aboout coding this in jQuery? (or using the position addon in jqueryUI)

Answer 1

Thats a bit complicated. but you need to make sure all the elements have a position:

relative, absolute, or fixed in order to position them like that.

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