DomContextMenu

Version:   0.7.1 beta - 2007-03-11
Copyleft:  © 2007 [ a n y m a | research ]
           Michael Egger, me AT anyma DOT ch
License:   GNU General Public License
Url:       http://www.anyma.ch/software/domcontextmenu/
			

Abstract

DomContextMenu.js provides a simple page-wide context menu that works on the structure of the underlying DOM. A right click on any node element starts an upward traversal of the DOM from the Target up to the document.body element, collecting all elements that have a contextual menu attached to them. Menu items are presented in traversal order, from the innermost element first to the outermost element last.

Contextual menu items can be attached, updated or removed dynamically at any time from any element

Files, Dependancies and Compatibility

DomContextMenu.js is tested on Mozilla Firefox and Safari on MacOS X. It does not work on Internet Explorer 5 for Mac (due to a bug in Prototype ?) and i can't figure out how to suppress the system context menu on Camino on Mac. It seems to work on both Internet Explorer 6 and Firefox 5 on Windows (XP).

It needs Prototype 1.5.0 (included in the distribution)

Files needed:
css/domcontextmenu.css         	styling for the menu
img/shadowAlpha.png             image file for the menu shadow
js/domcontextmenu.js            the script
js/prototype.js                	prototype 1.5.0

Download domcontextmenu_0.7.1tar.gz

Function Reference

DomContextMenu.create()

Call DomContextMenu.create() to initialize the menu. It creates a hidden <div> for the menu and shadows, an starts listening to the mousedown, oncontextmenu and keypress events. It doesn't create any menu items.

DomContextMenu.attach( node , options );

Attaches a contextual menu item to a node element

options is an object with the following keys:

Examples

DomContextMenu.attach(document.body,{ name:'Hello', call:function(){alert('world') } });

The following will output the inner HTML of the node with id 'book'

DomContextMenu.attach($('book'),{ name:'Read', call:function(){alert(this.innerHTML) } });

In the following example we give a reference to the context menu item, so we can change its text later accordingly;

attach($('fold'),{ ref:'toggle', name:'Expand', call:function() { var nextDiv = $(this).down('div'); if (nextDiv.visible()) { nextDiv.hide(); this.contextmenu.toggle.name = 'Expand'; } else { nextDiv.show(); this.contextmenu.toggle.name = 'Collapse'; } } })

In the following example we add a contextual menu item to all images inside the node with id "Gallery" at once. Note how we get the originating target object from the argument of the callback function.

DomContextMenu.attach($('gallery'),{ name :'Hide this ugly picture', tagName :'img', call :function(target){target.hide() } });

In the following example we add a contextual menu item to all nodes with class "lazy" inside the node with id "employees". Note how we get the originating target object from the argument of the callback function.

DomContextMenu.attach($('employees'),{ name :'Fire this guy', className :'lazy', call :function(target){target.remove() } });

DomContextMenu.remove(node,ref)

Removes menu item with reference ref from the node. What else?

Version History

Known Issues

2007-03-11, v. 0.7 and 0.7.1

2007-01-19, v. 0.6

2007-01-16, v. 0.0 - 0.5

Try it out

Some silly examples.
See the page source for how it's done

One
One-One
One-Two
Two
Two-One
Two-Two
CLICK ME!!!
Member
Details for this member
Member
Details for this member
Member
Details for this member