RightContext v0.2.5 : A REAL JavaScript Context Menu – Supercharged and on Anabolic Steroids! MMMMM….

CURRENT VERSION: Version 0.2.5 – RightContext is no longer just a right click context menu, and can be triggered by Left, Right clicks, or mouse over events! Thanks for all those who posted feedback – It REALLY helped!
This release also contains all previous fixes (discussed in the comments below), plus conditional display of menu items based on tag values (more in the comments and the docs).
0.2.5 fixes issues reported with Firefox 3.

RightContext is a supercharged right click context menu done in glorious JavaScript. It can be triggered by either a right or left click, or by mouse overs. I created it to answer a few requirements I had of context menus which I could not find anywhere else; mainly provide the *correct* contextualized menu items depending on what was right clicked. So now when you click a name link for example, the context menu can provide you with links relating to the contact’s email, phone, address etc.
RightContext generates unique context menus that are built based on the DOM element clicked using special attributes embedded in the element’s Html. The attributes are custom generated and can be anything.
Menu items can include [tags] referencing those attributes, which will cause them to be transformed to contain the actual values when the menu is constructed (i.e., when an element is right clicked.)

The main features of RightContext are:

  • Trigger menus via left or right clicks, or by mouse over events (new in 0.2.4)
  • Menu items that link somewhere
  • Menu items that perform a custom javascript function
  • Menu items that display hard coded 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.

The script is very simple to use. 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:

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

The code is free to use and modify for any purpose. There’s more information and usage instructions in the code itself as comments.

You can see it in action here

RightContext v0.2.4 download

RightContext v0.2.5 download [LATEST]


146 Responses to “RightContext v0.2.5 : A REAL JavaScript Context Menu – Supercharged and on Anabolic Steroids! MMMMM….”

  • harel Says:

    Nizzy, as shown in the example, you can add a menu of type TYPE_TEXT_EXT and provide a url to retrieve in the manner that has become to be known as ajax. I quite dislike this term so you won’t find any methods named AjaxThis or AjaxThat. Look at the “request” method – this is where its handled. The demo code uses that so you can find a working example there.

    example:

    {type: RightContext.TYPE_TEXT_EXT, url: “external_url_to_show.html”}

  • Joe Says:

    Harel,

    Great script….

    Do you know if it possible to put a textbox in a menu item? Like a TYPE_TEXT_BOX?

  • harel Says:

    Hey Joe,
    Yes you can put a textbox in 2 ways: one use TYPE_TEXT and just put the html as the text, or use an external html file in TYPE_TEXT_EXT and include an html form etc.

  • Joe Says:

    Harel,

    Another question…

    I did as you said and first I put the html as text. But when click in the textbox the contextmenu hides.

    I put as external file too but occurs de same.

    There is a way to block the menu, for example to click in textbox to edit and after this close the menu?

    Thanks,

    Joe

  • Brian Says:

    I was using the menu on a list in a scrollbar, when I would scroll to the bottom the right click menu would show up far far down the page. Not sure if this was the best way to fix or not, but I changed :

    this.position (this.contextMenu, this.mousePos.x + this.rightOffset, pos.y+dim.height);

    to

    this.position (this.contextMenu, this.mousePos.x + this.rightOffset, this.mousePos.y+dim.height);

    and now the menu shows up in the right spot no matter how I scroll.

  • harel Says:

    Brian,
    This is an issue when putting the menu on a ‘high’ component. This fix is actually included in the next version and is the right way to go.
    Thanks,
    Harel

  • Salma Sarwar Says:

    Hi Harel,

    Thank you for this great piece of code. However I need to comply with w3c standards and therefore is there a way I could modify the code so that the context menu is displayed depending on the class, so that the menu displayed depends on the class. Also could you make this menu hierarchical too???

    Thank you very much for your help.

    Salma

  • Salma Sarwar Says:

    Hi Harel,

    Just to clarify by hierarchical I mean submenus. Thanks.

    Salma

  • harel Says:

    Thanks Salma,
    I toyed with both class names as parameters and the additional attribute approach as it is now. The latter gave much more flexibility in adding any number of custom attributes to control the menu, while all known browsers ignore them. I don’t really see how I can reach the same level of flexibility with class names as there can be any number of arbitrary parameters for the menu. For example something like
    …. menucontent=”this is menu content blah blah”….
    as a class name would be:
    class=”.menucontent-this-is-menu-content-blah-blah”…. and then it has to be parsed etc. The process is a huge headache and not to mention almost unreadable to humans. So, sorry – I don’t have any such plans, but I will put the idea in my head and maybe I can come up with some other solution to comply with W3C.
    As for submenus, I don’t have the time to do them at the moment, but its been asked before and its a nice idea. It is possible through callbacks etc. to call up additional custom menu code which can generate sub levels though this is not so straight forward i don’t think.

  • Salma Sarwar Says:

    Hi Harel,

    Thanks for your response. I will have a go at doing the sub menus and I will tell you how I get on with it!!!

    Kind Regards,

    Salma Sarwar

  • Alex Says:

    Hi!

    Found your script in a typo3 installation. And it is used to check a property called “context”. This works well in my tests but it seems to be disallowed in a div tag, so I suggested to use the “id” property instead, which should work well in most tags.

    Perhaps you like to change it in general, perhaps you can check both properties, so it will not lead into an incompatible version.

    Anyhow, great script! :)

    Alex

  • harel Says:

    Actually Alex, using the id property will ‘hog’ it for its actual use… You might want to use the id property in your own code. Context is an ‘allowed’ tag like any other custom attribute – its true it won’t pass any xhtml/w3c/etc validation but that’s not the point of it. I’m not sure what you mean by it not being allowed on div tags. I specifically use it for divs. Let me know – maybe I can sort it out.

    the general idea was to use very custom and rightcontext-specific tags that are not going to be used by anything else.
    Thanks!
    H

  • khan Says:

    Harel,
    I am using your Javascript function on Right Click to display the menus in my custom application. This really works great in IE and FF. Thanks for your update.

    I have few questions regarding the functionality. I have the Right click function enabled for only on Href links. I do not have any Div tag earlier on my html and my page works find with Href Right click and I was able to see the Right click menus. Today I was trying to add a div tag to separate the html page. I am not adding Right click function on Div tag. I have Right click function on my href.
    After adding the div tags in to my html, my href right click was not working. Is there any problem on these ?
    If I click the link which is on the middle of the page then I was able to see the Right click else, its either trying to go down or up and not displaying the correct position of Right click. I think the problem is with the position.

    Any suggestion to resolve this issue? Appreciate your help.

    Thanks

  • harel Says:

    Khan, can you give me a link to your page if its public? You can email me if you don’t want to put it in the comments (harel at harelmalka dot com)

  • khan Says:

    Harel, Thanks for your immediate response.
    My page is not in the internet. But I found a way to solve my problem with Div tag. I have downloaded the RightContext.js file from your website. In your script I have overwritten the RepositionMenu method with the following method and it works great. Thanks Raúl Mora Merchán for posting the code. That works perfectly.
    I am posting the code again for more clarity.

    repositionMenu: function() {
    var mPos = this.findPosition(this.contextMenu);
    var mDim = this.getDimensions(this.contextMenu);
    var winHeight = window.innerHeight || document.body.clientHeight;
    var winWidth = window.innerWidth || document.body.clientWidth;

    mPos.y=this.mousePos.y;
    if (mPos.y + mDim.height > winHeight-30 ) {
    this.position(this.contextMenu, mPos.x, mPos.y – mDim.height);
    mPos = this.findPosition(this.contextMenu);
    }
    else
    {
    this.position(this.contextMenu, this.mousePos.x, this.mousePos.y);
    mPos=this.findPosition(this.contextMenu);
    }
    if (mPos.x + mDim.width > winWidth – 30 ) {
    this.position(this.contextMenu, mPos.x-mDim.width, mPos.y);
    }
    else
    {
    this.position(this.contextMenu, this.mousePos.x, mPos.y);
    mPos=this.findPosition(this.contextMenu);
    }
    },

  • khan Says:

    Harel, Thanks for your immediate response.
    I found a way to solve my problem with Div tag. I have downloaded the RightContext.js file from your website. In your script I have overwritten the RepositionMenu method with the following method and it works great. Thanks Raúl Mora Merchán for posting the code. That works perfectly.
    I am posting the code again for more clarity.

    repositionMenu: function() {
    var mPos = this.findPosition(this.contextMenu);
    var mDim = this.getDimensions(this.contextMenu);
    var winHeight = window.innerHeight || document.body.clientHeight;
    var winWidth = window.innerWidth || document.body.clientWidth;

    mPos.y=this.mousePos.y;
    if (mPos.y + mDim.height > winHeight-30 ) {
    this.position(this.contextMenu, mPos.x, mPos.y – mDim.height);
    mPos = this.findPosition(this.contextMenu);
    }
    else
    {
    this.position(this.contextMenu, this.mousePos.x, this.mousePos.y);
    mPos=this.findPosition(this.contextMenu);
    }
    if (mPos.x + mDim.width > winWidth – 30 ) {
    this.position(this.contextMenu, mPos.x-mDim.width, mPos.y);
    }
    else
    {
    this.position(this.contextMenu, this.mousePos.x, mPos.y);
    mPos=this.findPosition(this.contextMenu);
    }
    },

  • JuanU Says:

    Hi. I need the rightContext for a application in IEMobile. I don’t have if i can use this.

    Kind Regards,

    Juan.

  • Iacopo Says:

    Hi, I’m actually looking for a contextual menu to use in my web application. It should use a dynamically generated menu, according to where i click.
    I’ll explain better: one link of the menu, will open a window to add properties to an array. Then, after this window is closed, back to the original page, a second click on the same icon, will show the menu, to whom i’d dynamically add the new property.
    Questions are:
    1) can i do that with RightContext? I mean dynamically refresh the menu to be read, on page?
    2) can i show up the menu when clicking on an IMG, instead of a text href?

    Thanks a lot everyone! =D
    Byeee! =D

  • harel Says:

    Yes, you can do both with this menu. First, you can determine any kind of html tag to trigger the menu . the default as I remember is div, a, span etc. But it can be anything.
    And as far as dynamically change the menu – this is what this script is all about – giving you a menu based on WHAT was clicked (i.e., in context).
    Read the big comment block in the script and see the sample page for examples. Let me know if you have any questions afterwards.
    :o)

  • Fery Says:

    I am using your script RightCOntext. I like it very much, the configuration is awesome. Although there is a small problem. I am using the menu with the line of the big table. The menu shows different actions, which i can perform with this line(edit, show details)
    The problem is, that the menu is showed above the line. When i click it, the menu pops up above. For me, it would be much better, if it could show bellow right from the mouse click.
    Is it possible to set it this way somehow? I would really appretiate it.

  • harel Says:

    Hi Fery,
    Look at repositionMenu function. This does the checks to see where to place the menu. Maybe you can modify it to fit your table model? Or force it show ‘below’ mouse all the time (i.e., not check for window boundries).

  • Murdok Says:

    hi, i’ve a doubt. How can i use the attr1, attr2 values with function “onclick” like this.

    alert (‘you selected [attr2] option’);

    any idea?

    thanks

  • harel Says:

    It should just work if you use the tags in the onclick function. like:
    onclick: function() { alert("hey [attr1] how you [attr2]"); }
    Note that url param will overide the onclick so don’t use url if you’re using onclick.

  • Murdok Says:

    Thank u, don’t work with ‘ ‘ but it’s works with ” “

  • Dan Says:

    Is there a way to kill the menu when the mouse moves off of it? The timeout doesn’t seem to want to fire.

  • Dan Says:

    Duh, added an event handler for mouseout under the line } else if (this.menuTriggerEvent==”LEFT” || this.menuTriggerEvent==”RIGHT”) {

  • Jeff Pratley Says:

    I’ve been trying to fix a problem with the position of the menu when the page is scrolled to the right–the menu appears off to the left. I saw the fix posted by Brian for the vertical scroll issue, but don’t have the smarts to sort out what’s wrong with the horizontal scroll. Any ideas?

  • Alice Says:

    Is it possible to use onclick to call a custom function and pass the attributes? ie…
    onclick: onClickNextCustom([attr1]) ;

  • Erik Says:

    Thanks for working out this great functionality!

    I’ve added a check on the variable itemaction to avoid a javascript error when no url, nor onclick action is added in case of a menu item.

    itemAction = item[“onclick”];
    if (itemAction!=null && itemAction!=”undefined”) {
    try {

    itemSrc = item[“onclick”].toString();
    if (itemSrc.indexOf(‘[‘)>-1) {
    itemSrc = this.transform(itemSrc, objMap);
    eval(‘itemAction = ‘ + itemSrc);
    }

    } catch (e) {
    // nothing…
    }

    // set the cell onclick event handler.
    cell.onclick=itemAction;
    }

  • Allan Cano Says:

    Thanks so much for this code. It’s been a life saver.

    I did have a problem with the table/menu background color being changed by other css settings. Adding the following after tbl.id=”rcRightContextTable”;

    tbl.className=”rcRightContextTable”;

    And then adding the class “rcRightContextTable” to the css fixed the issue.

    Thanks again,
    Allan

  • Andrew Taylor Says:

    Thx for the excellent script. I’ve added a feature to it you might be interested in… custom cursor on mouseover. As a custom context menu is a bit of an unusual feature for web page, users have a hard time knowing when a context menu is available. A custom cursor can ease that situation.

    rightcontext.css:
    .rcArea {
    cursor: url(/images/cursors/cursor-rclick.cur),default;
    }

    rightcontext.js:
    72: added
    addClass: function(elem,className) {
    if (!elem)
    return;
    if (elem.className.indexOf(className)==-1) {
    if (elem.className.length==0)
    elem.className=className;
    else
    elem.className+=’ ‘+className;
    }
    },
    101: added
    this.addClass(thisTag,’rcArea’);

    Of course the URL could be relative. Here’s the cursor I’m using (The .cur is used and .png is kept for reference):
    http://benow.ca/misc/cursor-rclick.cur
    http://benow.ca/misc/cursor-rclick.png

    Thanks again…

    Andy

  • harel Says:

    Thanks a lot Andy! Great stuff.

  • Jeff Says:

    I was just wondering if there was a way to make the menu fire using javascript
    something like a href=”javascript:startmenu();”

  • harel Says:

    Jeff, you could call RightContext.render(someObject); where someObject is the caller of the context. It sohuld contain the properties usually set by the caller objects (like the attributes you’d place on a div with the context details for example).
    I don’t have the time or resources to look into this at the moment but you could put a console.log(caller) right after the render function and see what kind of attributes are provided by the demo page (for example).

  • dani Says:

    Hi Harel
    Congratulations on that great script.

    iv’e tried to install your script inside my ajax application and it only seems to work only after i insert the RightContext.initialize() into a function and then fire this function on mouseover over a div i have. this solution seems to work in any browser except ie that insist of this JS error:

    ‘type’ is null or not an object on the file rightcontext.js in line 348 char 4.

    any idea?

  • Ludwig Mair Says:

    Hi,
    just one question. will get this brilliant Menu updated for prototype.js 1.7?

    regards Ludwig

  • Ludwig Mair Says:

    Hi again,

    and thanks a lot for this pice of art. it is the best i know.
    Is there a slide chance to get this menu also as a jquery version?

    Ludwig

  • harel Says:

    The whole idea of this script is that it does not rely on any js framework so it can be used along side prototype, jquery etc. at any version.

  • Ludwig Mair Says:

    Hi Harel,
    htanks for your quick anwser.

    brilliant, thats, what i like to hear. But still, do you have a update in mind or did you expirence any problems with the new browsers like IE9 or Firefox 4?

    Ludwig

  • harel Says:

    I don’t have an update planned due to lack of time. The code is there if any one wants to pick it up. In the ton of comments above are many many refinements, fixes and suggestions made by the good people of the internets.
    I didn’t test this on IE9 or FF4 yet but I don’t see why it shouldn’t work on those browsers.

  • Nuno Passos Says:

    Hello Harel,
    I saw your post on the context menu, and found it very interesting. Right now I am a programmer for a software company and we are trying to create a context menu on an SVG image to be displayed in the browser Firefox Firefox 3 or 4. I currently have a solution for the Internet Explorer browser to FireFox but I have been looking and I have tried several solutions but found none so far for FireFox. Could ajudarme or know a solution to create a context menu to Firefox on an SVG image?
    I appreciate any information or any help. Thank you. Nuno Passos. npassos@gmail.com

  • harel Says:

    Hi Nuno,
    I’m sorry but I’ve never tried attaching context menus to svg images directly. Did you try wrapping the image with divs and attaching the menu to the div?
    And have you tried adding svg elements to the allowedContexts array?
    allowedContexts: ["a","div","span","input","circle","rect"],
    (I’ve never tried it but it might work…)
    I’m sorry i’m not much help there. I just don’t have the time to experiment. If you do make it, please post back here on how you did it.
    Thanks and good luck!

  • RightContext is now on github | Dot Matrix Says:

    […] Finally created my first github repo for RightContext: […]

  • Pravin Nagare Says:

    What changes shall I make so that this code will work for chrome also??
    Thanx in advance

  • harel Says:

    Nothing, it works on Chrome already…

  • Charles Meyer Says:

    I’m trying to attach a menu to an area tag, a region on a map, and while I can generate the menu, it displays either at the top or bottom of the web page (depending on the container position value), rather than adjacent to the region. Any suggestions? I’m relatively new at this, so I may be overlooking something otherwise obvious.

Leave a Reply