override default context menu? replied by weazil @ Fri, 04 Apr 2008 17:38:49 -0000

weazil — Fri, 04 Apr 2008 17:38:49 -0000

I’ve been toying with the example provided, how do you get it to over ride the original context meunu? when I right click I get the original context menu with the prototype ui context menu under it.

I’m using Firefox 2.0.0.13 on Fedora 8, I have not had time to test it on a windows box. i checked my javascript settings and it is set to allow context change.

code for multi-level menu? replied by obaid @ Thu, 03 Apr 2008 21:04:01 -0000

obaid — Thu, 03 Apr 2008 21:04:01 -0000

how do I create multi-level menu?

Suggestions? replied by mhollauf @ Tue, 18 Mar 2008 16:31:24 -0000

mhollauf — Tue, 18 Mar 2008 16:31:24 -0000

Actually ignore that, just found the problem – don’t ever try to set a filter(opacity) on the contextmenu … ;-)

Re suggestions, I think the component is really good, but as I’m an advovate of the “less is more” principle I’d recommend to not let it get too bloated, in terms of features and code size. I removed all those new callbacks from my code cause I don’t need them and they just cost time and bandwidth. But I guess everyone has different requirements don’t they …

Thanks,
Michael

Suggestions? replied by mhollauf @ Tue, 18 Mar 2008 15:21:44 -0000

mhollauf — Tue, 18 Mar 2008 15:21:44 -0000

Hi kangax,

Great work on the ContextMenu – I tried to integrate the latest SVN version into my code but it seems that submenus don’t work in IE yet. Am I right? It seems to be a problem with the DOM, in that it won’t display a DIV inside an LI / A tag that’s outside of the original UL.

Any ideas?

Cheers
Michael

switch the selector on the fly replied by johncarlson21 @ Sun, 20 Jan 2008 23:37:23 -0000

johncarlson21 — Sun, 20 Jan 2008 23:37:23 -0000

Hey man… well I don’t want to make another instance.. because if I show a datagrid with like say 20 rows I would have to make 20 menus….. and that can’t be good.. :( so that is why I ask if you can make one menu that when you click on a row it changes the selector or sends a variable to the menu for the call backs.. so if I click on row 1 it sends say 1 to the alert(row) and it would show row1.. in the alert.. :)

thanks for the quick reply

switch the selector on the fly replied by kangax @ Sun, 20 Jan 2008 19:10:36 -0000

kangax — Sun, 20 Jan 2008 19:10:36 -0000

John, you could always create another instance of a menu which would be binded to another selector. I am planning to change selector logic in a near future to use delegation, rather than attaching events directly. This would make it possible to add/remove elements from the document without worrying about losing event handlers.

Best,
kangax

switch the selector on the fly replied by johncarlson21 @ Sun, 20 Jan 2008 17:00:13 -0000

johncarlson21 — Sun, 20 Jan 2008 17:00:13 -0000

Hey is there a way to switch the selector for the menu on the fly.. say I create a menu, but i want to use it on a table of data and I want to switch the selector so that I can tell it which say row id I am on to respond to my menu actions..

Sample code? replied by beefymanus @ Sat, 15 Dec 2007 04:02:17 -0000

beefymanus — Sat, 15 Dec 2007 04:02:17 -0000

All you need was to add the desktop theme css (I also added the mac shadow) and give the ContextMenu a classname of menu desktop. You can also use others like mac themes or vista, I forget the exact class names for those. Heres your modified code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test URL Content</title>
    <script src="../lib/prototype.js" type="text/javascript"></script>
      <script src="../lib/effects.js" type="text/javascript"></script>  
      <script src="../dist/prototype-ui.js" type="text/javascript"></script>

  <link href="../themes/contextmenu/contextmenu.css" rel="stylesheet" type="text/css">
  <link href="../themes/carousel/prototype-ui.css" rel="stylesheet" type="text/css">
  <link href="../themes/shadow/mac_shadow.css" rel="stylesheet" type="text/css">
  <link href="../themes/contextmenu/desktop.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id='aDiv' style="width:100px; height:100px; background-color:#CCCCCC; border:solid #000000 1px;">This is aDiv</div>

<script language="javascript" type="text/javascript">
var contextLinks = [
{
    name: 'Save',
    className: 'add',
    callback: Document.save
}, 
{
    name: 'Save as...',submenu: [
                                {name: 'Excel (.xls)',className: 'add',callback: Document.saveAsXls}, 
                                {name: 'Word (.doc)',className: 'add',callback: Document.saveAsDoc}, 
                                {name: 'Acrobat Reader',className: 'add',callback: Document.saveAsPdf}
                                ]
}
];

new UI.ContextMenu({ 
    selector: '#aDiv', // element to attach right click event to
      showEffect: false, // indicates whether Effect.Appear is used when menu is shown
      className: 'menu desktop',
       menuItems: contextLinks // array of links to be used when building menu
});
</script>

</body>
</html>

Sample code? replied by nrasch @ Mon, 10 Dec 2007 02:01:37 -0000

nrasch — Mon, 10 Dec 2007 02:01:37 -0000

Kangax:

Hello. :)

I have attempted to begin testing of the contect menu this evening. I am having issues getting an example to work.

In IE7 nothing happens, and in Firefox and Safari the options show up, but below my div element.

Would you mind putting up a simple example?

Or, as an alternative, here is the simple code I was testing with (which is pretty much a cut-and-paste of the example you provide in the documentation):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Context Menu Test</title>

<link type="text/css" href="/themes/contextmenu/contextmenu.css" media="all" />
<script src="/javascripts/prototype.js"></script>
<script src="/javascripts/prototype-ui.js"></script>
<script src="/javascripts/scriptaculous.js"></script>

</head>

<body>

<div id='aDiv' style="width:100px; height:100px; background-color:#CCCCCC; border:solid #000000 1px;">This is aDiv</div>

<script language="javascript" type="text/javascript">
var contextLinks = [{
    name: 'Save',
    className: 'back',
    callback: Document.save}, 
    {name: 'Save as...',submenu: 
        [{name: 'Excel (.xls)',className: 'xls',callback: Document.saveAsXls}, 
        {name: 'Word (.doc)',className: 'doc',callback: Document.saveAsDoc}, 
        {name: 'Acrobat Reader',className: 'pdf',callback: Document.saveAsPdf}
    ]}
];

new UI.ContextMenu({
    selector: '#aDiv', // element to attach right click event to
  showEffect: false, // indicates whether Effect.Appear is used when menu is shown
   menuItems: contextLinks // array of links to be used when building menu
});
</script>

</body>
</html>

Many thanks!
Nathan

Suggestions? replied by kangax @ Fri, 07 Dec 2007 20:56:51 -0000

kangax — Fri, 07 Dec 2007 20:56:51 -0000

Hi guys,

If anyone has any suggestions regarding Contextmenu class, I would be glad to hear them out!
Just wanted to say that submenus are coming very soon and there’s a new Leopard theme in a trunk (Seb, great job on that!)

best,
kangax

Recent Posts in Context Menu | Prototype UI