0

I'm implementing this menu for multiple elements like this:

enter image description here

The elements are created dynamically in javascript.

Do I need to recreate the html for each element ( this is how I'm doing it now ). Or is there an easier way to use the same html for each element.

One thought was to inject the html when the user clicks on the star.

The other thought was to use some positioning mechanism.

Community
  • 1
  • 1
  • Is the semi-circle thing what you are interested in? It is to show up whenever you click the start on an item? – Mike Brant Jun 07 '13 at 20:43
  • ... yes when you click on a star, the pie menu will expand out as shown in the image. –  Jun 07 '13 at 20:44
  • I'd use the same html that's initially hidden, and position / show it when a star is clicked. I'd only insert new html if the menu will ever be different. If you post some html or a fiddle, I'd be happy to give you an example. – Josh Noe Jun 07 '13 at 20:55
  • How do I determine the positioning. Is there way to grab the position of the element clicked. Possibly from the event handler that is called on the click. –  Jun 07 '13 at 21:03
  • Here is the demo of the pie-menu - http://dabblet.com/gist/3979221/cb69c5e8ccf0745fff2c94b47b27b108931f1a15 –  Jun 07 '13 at 21:11

1 Answers1

1

To answer your first question, no you don't need to recreate the HTML for each element. It can be created once in HTML and then you can toggle its visibility and position it using jQuery. Check out jQuery's .position() method. It's extremely powerful.

As an alternative you can inject the html via javascript when the user clicks on the star, yes. Either way you choose, I would only create the HTML once and then position it using jQuery.

Hope this helps.

Rob R
  • 1,011
  • 8
  • 10