Hi. I need to create a round navigation system, similar to the round nav button on an iPod Touch (see image here: http://www.flickr.com/photos/37476174@N06/4668497237/).
It needs to be JavaScript-based (not Flash). It would have different menu items around the dial. It also needs to be small (around 300px in diameter). Does such a JavaScript component already exist? Thanks.
There are many ways to do this. In modern browsers that support CSS rounded corners, you could probably do it without any additional image files, but you could also have a simple circular image as a background. Then you'd position some clickable elements with transparent backgrounds and white/black/purple/whatever text for the buttons.
Mouse drag around the circle would be possible and a fun project but probably not trivial (mouse dragging always has some quirks.)
I've never seen a jQuery plugin for such a thing but I wouldn't be surprised if one exists. However, if it's just clickables around a circle, that wouldn't be too hard. Javascript supports all the trig functions you'd need.
Here's a couple of examples that may help: CSSPlay and Fish Eye navigation and Circular navigation
Having said all this I've never played on an ipod enough to remember how it's done!