Perfection Kills

by kangax

Exploring Javascript by example

Meet Proto.Menu – simple context menu class

August 20th, 2007

Context menus are a great way to enhance user experience when used appropriately. About a half year ago, I needed one. There were few decent solutions out there but none of them was what I needed. YUI menu seemed like a solid solution but was just too much, as I only needed basic set of features. After spending couple of days figuring out all the right-click browser quirks Proto.Menu was born – a simple class on top of prototype.

Few days ago, playing with new release of prototype, I realized how much this little context menu script would benefit from new DOM builder and other 1.6 goodies. The class was almost completely rewritten and while at the same ~2KB, it now has a set of useful options and is more cross-browser than ever : )
In case anybody was looking for something like that, you might want to give it a try

Categories: extension, Proto.Menu

Comments (16)

  1. Gravatar

    Rey Bango said on Aug 26, 2007 @ 5:40

    Hey, this is Rey Bango, poster of Proto.Menu on Ajaxian. Could you email me to discuss some things? Thanks.

  2. Gravatar

    cull said on Aug 28, 2007 @ 10:58

    Could you put up a demo link please?

  3. Gravatar

    kangax (article author) said on Aug 28, 2007 @ 16:52

    cull,
    the demo is right on the same page

    Just right click anywhere and the menu will pop-up

  4. Gravatar

    OrbMan said on Sep 29, 2007 @ 16:06

    The menu works great, but how can I get a reference to the element I clicked on to display the menu, from within the callback function?

  5. Gravatar

    Choupigore said on Oct 12, 2007 @ 3:08

    It’s a very good extension but I have a problem. I load the page and the menu works fine on elements with contextmenu class. Now an ajax request adds a new element in the DOM (insert with prototype) with contains the class contextmenu. On this new element, the menu don’t appear. I tried to modify your code in order to ‘update’ the menu triggering but performances are very bad.
    I am not en expert in javascript and prototype to find a good solution. Can you help me finding it ?

    Thanks

  6. Gravatar

    Ronan Mc Nulty said on Oct 25, 2007 @ 2:53

    I like your menu but I too would like to know how to reference the element id where the right-click was called

  7. Gravatar

    kangax (article author) said on Oct 25, 2007 @ 11:29

    @OrbMan, @Ronan Mc Nulty

    Guys, the next version of Proto.Menu is coming out very soon. Support for clicked element reference is coming as well as few other enhancements/fixes.

    Stay tuned!

    best,
    kangax

  8. Gravatar

    Venu said on Nov 13, 2007 @ 13:59

    It is one of the best extensions of prototype and I looked at the new src for the menu at http://www.prototype-ui.com/

    But still I was not able to figure out how to reference the element id where the right-click was called. If possible can you please explain.

    Looking forward for Contextmenu with UI.IframeShim

  9. Gravatar

    kangax (article author) said on Nov 13, 2007 @ 15:53

    Venu,
    every callback in UI.Contextmenu gets event object as a first argument. You can get id of a clicked element like so:

    function(event){
    alert(event.element().id);
    // or
    alert(event.target.id);
    }

    Hope this helps

  10. Gravatar

    Venu said on Nov 13, 2007 @ 19:41

    It helps and thanks for taking time for explaining. I am still little confused let me rephrase my question.

    I was trying to locate where in the code is it mentioned to show the contextmenu only onRightClick. ex: Some statement like this in the code but did not found it if(e.isRightClick()){this.show(e)} Can you please point me the statement which shows the menu on right click?

    Thank you once again I appreciate your help.

  11. Gravatar

    manfred said on Nov 14, 2007 @ 13:10

    You have done a great work with that proto.menu, thanks a lot.

    Do you plan to upgrade to version 1.6.0 – official release ?

    How about menu entries with a icon in front of it (office like) ?

  12. Gravatar

    John Carlson said on Nov 27, 2007 @ 11:13

    I think I got a fix for everyone to get the id of the element that they are using the context menu on.

    It works for me.. and you don’t need to have UI for it..

    here it is..
    right after you have your script includes..

    var item = “”;
    function getitem(f){
    item = “”;
    if(f==null){return false;}
    item = $(f).id; // or what ever attribute you want like title you would use $(f).title
    //alert(item); // uncomment this if you want to test to see what you are getting back..
    }

    After you have that then go to your element that you are using the context menu on and put this:

    onmousedown=”getitem(this)”

    AND BAM you now can get your element id or whatever you want.. :)

    I hope this helps.. :)

  13. Gravatar

    John Carlson said on Nov 28, 2007 @ 12:09

    got a question for someone.. how can I change the disabled option dynamically based on the element that the contextmenu is observing..

    say I have an element called click me and I want to be able to pull a contextmenu up but if the title equals “mine” I want a specific menu item to be set to disabled..

    any thoughts..?

    thanks in advance

  14. Gravatar

    phil said on Nov 29, 2007 @ 5:05

    I just switched to your Proto.Menu and I really like it. The most important feature I need, is to have unlimited number of sub-items. I just want to pass a var like children with another level. Any plans to get this working or anybody else already done this?

    And of course, image support for each menu item would be nice. :-)

    Phil

  15. Gravatar

    kangax (article author) said on Dec 4, 2007 @ 16:15

    phil

    I just released a new version yesterday. It has support for images as well as few other improvements.

    Best,
    kangax

  16. Gravatar

    Bk said on Aug 17, 2010 @ 1:45

    Hi,
    nice script but it doesn’t work.
    If I load the website (tested in FF3.x) I receive the JS error:
    Error: $(document.body) is null
    Row: 51

    Prototype is 1.6.0.2 and everything else works just fine on the site. Greetings.
    Bernhard

Trackbacks

Leave a Comment

Please, don't forget to escape your input (<, > and &). Wrap code sections with <pre>

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>