Thursday, February 22nd, 2007

Dynamic Right Click Context Menu

Category: JavaScript, Library

<p>Harel Malka needed a right click context menu for an application, and found that the offerings out there although provide a right click menu, do not actually provide any context. The menus are predefined in advance and dot really relate directly to what you clicked.

For example, If I right click a contact name link, I’d like my context menu to show me action links relating to that specific contact, such as: Email [contact email], Call [contact phone], Edit [Contact name] etc.

Harel created a library to do this for him called rightcontext.

Features

  • Menu items that link somewhere
  • Menu items that perform a custom javascript function
  • Menu items that display hardcoded text
  • Menu items that retrieve text via a remote ‘ajax’ call
  • Menu item separators
  • Image icons for menu items
  • Supports multiple different menus that can be called depending on the element clicked
  • All menu items can contain [tags] which are transformed at runtime to the values embedded in the clicked element
  • Conditional evaluation of menu items. An item can show or not show depending on a specified condition in the menu template (new in v0.2.3)
  • CSS based look and feel
  • Unobtrusive standalone javascript: no additional js framework required.

You simply define your menu ‘templates’ and add a ‘context’ attribute (and any additional custom ones you need) to each element you’d like to have a context menu:

  1. context="actionsMenu" attr1="name" attr2="email@email.com" .....

Rightclick Context

Related Content:

Posted by Dion Almaer at 7:44 am
19 Comments

+++--
3.8 rating from 124 votes

19 Comments »

Comments feed TrackBack URI

Is cool, but am a bit worried about the tagsoup. Perhaps a version where I can simply throw the context into the classnames would be better?

All in all though, I dig.

Comment by Pi — February 22, 2007

From a Web usability and user experience point of view, this is completely awkward. Users do not expect right clicks on web pages/sites. They just click on links and buttons. nothing more.

Comment by Rui Lopes — February 22, 2007

He said this was made for an web app. Who knows his users may be used to excel or some other form of app that uses right click. Use it if you want to, don’t if you don’t. easy breezy.

Comment by jd — February 22, 2007

Hmm. It’s always nice to have a stand-alone package. However, dojo does allow you to create right-click menus programatically, with no trace of actual html needed whatsoever. I use this extensively in my upcoming viual editor for JDA. It’s quite simple;

this.menu = dojo.widget.createWidget (“PopupMenu2″,
{
widgetId: this.id+”_Actions”,
contextMenuForWindow:false,
toggle: “explode”,
targetNodeIds:[this.id],
});

var ditem = dojo.widget.createWidget(“MenuItem2″,
{
widgetId: this.id+”_deletemenuitem”,
caption: “Delete Component”,
});
ditem.onClick = this.deleteMenu.mybind(this);

var sitem = dojo.widget.createWidget(“MenuItem2″,
{
widgetId: this.id+”_stylemenuitem”,
caption: “Style Component”,
});
sitem.onClick = this.styleMenu.mybind(this);

var citem = dojo.widget.createWidget(“MenuItem2″,
{
widgetId: this.id+”_configmenuitem”,
caption: “Configure Component”,
});
citem.onClick = this.configMenu.mybind(this);

this.menu.addChild(ditem);
this.menu.addChild(sitem);
this.menu.addChild(citem);

this.child = element;
this.child.style.width = “100%”;
this.child.style.height = “100%”;
var cont = dojo.byId(this.container);

Cheers,
PS

Comment by Peter Svensson — February 22, 2007

As has been mentioned in the comments on Harel’s blog, it appears there’s a problem in Firefox 2.0 where the normal context menu appears over the top of the custom one by default. This can be switched off, though, but it’s irritating nonetheless. If anyone can come up with a way around that, I’d be very interested in using this!!

Comment by Andy — February 22, 2007

Hi! Thanks for the comments!!

JD, the problem with the menu in dojo (unless i’m wrong and please correct me if I am), is that you can’t pull out specific information regarding the item you right clicked on. What I needed was a context menu that shows items that related directly to a specific link when right clicked. I didn’t want to define menus per link, as i might have hundreds of those on a screen (not just link though – divs, input elements etc.)
With RightContext, i just define a generic template for each menu I want to use. The object will parse that template into a menu based on the extra tags placed in those elements. As well, if the script fails for any reason (no javascript) all you’re left with is html elements with extra informative tags. For example, my links showing contact names, also hold tags like _id=”CONTACT_ID” and _name=”CONTACT_NAME”. These gets parsed to the menu so when right clicked it shows items like : Edit Harrison Ford, Email Harrison Ford, Ford Harrison Ford etc.
As well, based on those tags, a menu item can evaluate whether it will show for this specific link or not. I didn’t want to show the Email menu item if the contact did not have an email address on file. So the html href tag also contains _haseml=”Y/N” whether it has an email. The email link will only show it _haseml=”Y”.
I’ve already started integrating this into my application and it works a treat.

As for the firefox 2 issue: For me Firefox 2 on linux and on windows both installed without the right click context disabled, so it works fine though i heard that some people might have had their firefox installed with this option disabled by default.

Also, this script does not work on opera at this moment, though I hope to correct that soon (sorry opera crowd – great browser, but just didn’t get round to it).

And right, from a GENERIC usability point of view, disabling the right click is hmmm bad, BUT, that depends on the context of the application/site. In my context it makes sense, and provides a useful features the users want.
It also only disables the right click for specific items NOT for the entire document! I might add a small permanent switch to the menu item to allow it to switch to the browser’s menu…

And as for the tagsoup issue – that was the easiest way for me to add the properties in a way that i could easily read and parse. I can’t embed them into the classnames or style sheet – it’s putting data with layout definitions… not right. It also puts the additional data where’s its closes to home – right on the element in question (the link, div, input element etc.).

Thanks for all comments – keep em coming, please!
Harel

Comment by Harel — February 22, 2007

Interesting in a sinful way. Not really working in Safari, though.

Comment by Guilherme Lopes — February 22, 2007

Doesn’t work on Opera too.
It’s a nice experiment but I think right button should never be “obfuscated”.

Comment by Andrea Giammarchi — February 22, 2007

Likewise – I’d prefer the user to get what they were expecting from a right-click, and present my own navigation or content some other way. Very nicely put together, though!

Comment by Andy — February 22, 2007

A context menu is a very valid user tool if used within a Web Application – which was the reason for the widget. I too have just created a context menu for my company’s CRM application. I wouldn’t override the context menu on a Web site though (especially on links).

Comment by Darryl Lyons — February 22, 2007

Andy, this script was created for a CRM as well ;o)
It seems to fit the bill for this type of applications.

Mind you, that this script could EASILY be adapted to be a left click context menu which could be triggered by a little image by the actual element you want a context menu for. Its only from ‘OS’ convention that it was created as a right click. As in any application, when I right click something, I expect a menu with links pertaining to what I clicked.

Harel

Comment by Harel — February 22, 2007

I disable much of the JS in Firefox — not that I’m paranoid, I just don’t like webpages changing window height/position/etc. So for me, the same side-effect occurred where FF’s regular context menu popped up over the custom one. I know in IE there’s a way to cancel it out, but with FF’s options set, I don’t see a[n obvious] way around it. Neat idea, but not very practical IMO. why not just have the menu pop up on a regular click, so when they think they’re following a simple link, they get a list of options instead?? just a thought…

Comment by Corporal Max Sterling — February 23, 2007

Sterling, I’m doing just that. The script is being adapted to allow configuration of what triggers menu : left/right click, mouse overs etc.
Too many objections to right click overrides. Although it works great in my context, i can see it won’t work for most.
Harel

Comment by Harel — February 23, 2007

Interesting article!

I’m wondering if there’s a way so you can possibly detect how long a mouse button has been held down, and if it exceeds a pre-determined time, then show the context menu? (ala Mac)

Comment by Brad — February 25, 2007

I also have Firefox configured to not allow over-riding the context menu by web pages. Context menus can be useful in web applications though, so a Firefox extension that would allow for the override on specified sites would be a huge gain in that context especially in controled environments like intranets.

Comment by Martin — February 26, 2007

Just my 2 cents, but I think that we will all have to get used to the idea that users will need right-click context menus to really use the new breed of online apps that mirror desktop programs. Just today, it was announced that Adobe is gonna roll out a web-app version of PhotoShop. For an application that advanced, a true right-click context menu is probably going to be very beneficial to users, especially if they’re used to a context menu when right-clicking in the desktop version of the app.

Comment by Graham — March 1, 2007

Fellas, RightContext now supports left click menus and mouse over menus in addition to the default right click event.
Brad – not a bad idea at all! I’ll see what I can do to add delayed click action to the menu.

Comment by Harel — March 13, 2007

So much unnecessary code, I created a context menu 20 times better with about 1/8 the code. First of all you should feed your links for the menu using an array of objects, each object has two attributes, name and handler. You can then loop through the array, dynamically creating an unordered list as your menu container and list items with embedded anchors as your links while attaching the object attributes. You can even add a divider, just create an object in the array with the className divider, use an if statment in your for loop and create an empty list item. Use css for all styling; hover, divider, borders, background images, whatever. Then use one function to determine mouse position window size to position the menu. And finally use addEvent and removeEvent for deleting the menu when the document is clicked. That is what a clean context menu is

Comment by Rozzy — October 15, 2007

place to place we can use this efficiently.

Comment by onder — June 14, 2008

Leave a comment

You must be logged in to post a comment.