Javascript Radial Menu P.o.C.

[Minos]

So it's been awhile, and to get back into the web coding swing of things, I decided to work on a javascript radial pop-up menu. When a site visitor holds the ctrl key, a radial menu is displayed. It is hidden when ctrl is released.

A few notes before I link to a proof of concept:

• I am aware this has probably been done. I'm not interested in someone else's code. This is primarily a warm-up exercise for me. However, I felt like sharing if someone happens to be looking for something similar.
• The HTML side of the site is incomplete. It is simply a shell to display functionality.
• This is in early infancy and is not yet fully Opera or IE-friendly. That is my next adventure. Still interested? Check it out here.

What is done:

• Customizable cvar.js file that can toggle a background, subtitled descriptions, and menu open on mouse (or center of page); and modify number of menu items, links, sizes, angles, etc.
• Customizable menuStyle.css file to optionally configure menu items and subtitle style sheets.
• Edge of screen limiting.

To do list:

• Optimization and and necessary bug fixes. Work on legacy IE compatibility.
• Hover Animations.
• Anything else that pops into my head. Open to suggestions.

Everything is in external files and can easily be added to other sites and modified to suit them.

*UPDATE* Menu tested and functional in the following browsers:
IE 8+
Mozilla Firefox 2+
Google Chrome 4+
Safari 3+


IE 5-7 will not yet render properly, which makes sense since during that time Microsoft felt they knew better than the w3c.
Opera 9 and 10 have an inherent ctrl-click command to save images, but if the keybinding is changed the menu itself should function.

[traq]

pretty cool.

[djr33]

It's interesting and might be a good idea in some ways.

However, there are some practical problems:
1. Unless you were to introduce this on a site like facebook where it would become a standard quickly, it would probably be more trouble explaining it to the users than it would be help for usability. It's not intuitive (in fact, it's completely hidden unless you already understand it), not to say it's not good once you know how to use it.
2. It might be difficult for some people to perform that action, especially for those who still have trouble double clicking. Interfaces should be simpler, not more complicated. That said, I think this could have a use, but not without a backup.
3. Similarly, this only works in firefox on a PC. If you get this to work in other browsers, that's only the start of the compatibility issues, because you will then face other operating systems that don't have a "control" key, or in fact, as is the case on a mac, use that key for another purpose (right click, when combined with the left mouse button). The problems only get worse for mobile devices where even right click isn't available. The main point is that this limits the usability and requires a backup if this isn't only meant to work in a certain setup.

This would be a perfect addition to a personal-use website or for a controlled group of users, such as with an intranet or for some or closed-group system. But if it's meant for wide use, changing general usability of the web is a tough challenge. Note that I'm not saying this is a bad direction (except potentially for users who would have physical trouble combining the two actions). I'm just pointing out that the web isn't ready for it yet, whether or not it's a good idea.

On the other hand, it might be fun for a game type of site where figuring out how to use the menu is part of the fun-- perhaps sometimes triggered by different keys.

[Minos]

It's interesting and might be a good idea in some ways.

However, there are some practical problems:
1. Unless you were to introduce this on a site like facebook where it would become a standard quickly, it would probably be more trouble explaining it to the users than it would be help for usability. It's not intuitive (in fact, it's completely hidden unless you already understand it), not to say it's not good once you know how to use it.
2. It might be difficult for some people to perform that action, especially for those who still have trouble double clicking. Interfaces should be simpler, not more complicated. That said, I think this could have a use, but not without a backup.
3. Similarly, this only works in firefox on a PC. If you get this to work in other browsers, that's only the start of the compatibility issues, because you will then face other operating systems that don't have a "control" key, or in fact, as is the case on a mac, use that key for another purpose (right click, when combined with the left mouse button). The problems only get worse for mobile devices where even right click isn't available. The main point is that this limits the usability and requires a backup if this isn't only meant to work in a certain setup.

This would be a perfect addition to a personal-use website or for a controlled group of users, such as with an intranet or for some or closed-group system. But if it's meant for wide use, changing general usability of the web is a tough challenge. Note that I'm not saying this is a bad direction (except potentially for users who would have physical trouble combining the two actions). I'm just pointing out that the web isn't ready for it yet, whether or not it's a good idea.

On the other hand, it might be fun for a game type of site where figuring out how to use the menu is part of the fun-- perhaps sometimes triggered by different keys.

1 + 2. I agree, which is why even on my site it is not, nor will it ever likely be, the sole means of navigation (note the navigation bar at the bottom) That is the inherent trouble with trying anything new when it comes to technology. However, having it there as an option, and a much quicker option, is a step.

I am aware of compatibility limitations, but with minimal changes it is already working in IE 8 and 9. I haven't gotten around to testing other browsers, yet. It may very well work in others. As far as key bindings are concerned I also recognized this. However, as I don't anticipate much traffic on my personal site (also why I haven't gone through the fun of registering a domain name), I felt it would suffice.

However, I don't mean this to be the only possible implementation. It could just as easily function in the same vein as a pop-up menu: user clicks/hovers on a "menu" button, and the radial menu is shown wrapping around the outside. I'm working to make the code as easy to modify as possible. Most configurations are simply changing variables in the cvar file, leaving graphics as the only "difficult" work.

Anyway, it is a proof of concept. Although I agree and mused over the same points, I do appreciate the feedback .

[traq]

you could probably bind the toggleOn() function to hovering on a particular element fairly easily.

[Minos]

you could probably bind the toggleOn() function to hovering on a particular element fairly easily.

Very easily. In fact that just lent itself to another option I will be adding when I get time.

Also, updated known browser compatibilities.

[djr33]

That sounds fine to me. My main concern was about usability when ctrl+click was a problem, beyond the issues of technical compatibility within JS. As long as there are alternatives it would be a fun addition to a site. That still leaves the question of how you'll explain it to the user, but that can be solved easily enough. (A giant popup, right? Haha.)