Proto.Menu gets facelift
It’s been over 2 months since the last release of Proto.Menu – highly lightweight and easy-to-use prototype based extension aimed to make context menu creation as simple as possible. Version 0.5 happened to be quite useful (considering all the positive feedback). There were many requests for all kinds of features, but the goal was to keep things small and concise. After analyzing the source, I found few obvious drawbacks which were supposed to be taken care of long time ago. Trying not to bloat the code base, the script was rewritten with speed, size and accessibility in mind. The result is a new shiny version – still small and fast but is much more robust and accessible. Without further ado, here is what the new version is all about:
Prototype 1.6
Prototype 1.6 is finally out. Upgrading Proto.Menu to the latest revision was definitely a reasonable thing to do. Besides tons of great enhancements and speed improvements, RC1 fixed a “conextmenu” bug (which was taken into account in a previous version) – that fix itself made the script even more compact.
Iframe shim
We all know the notoriously famous IE6 bug – select elements don’t play nice, popping through any elements positioned on top (even when z-index is set to be higher). Unfortunately, IE6 is still the most used browser out there. I have no idea how this fix didn’t make its way into previous versions, but I believe that any self respectable extension should be taking care of this annoyance.
this.shim = new Element('iframe', {
style: 'position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);display:none',
src: 'javascript:false;',
frameborder: 0
});
...
if (Prototype.Browser.IE) {
this.container.insert({
after: this.shim.setStyle(Object.extend(Object.extend(elOffsets, elDimension), {
zIndex: this.options.zIndex - 1
}))
})
}
zIndex option
When fixing the z-index bug, I realized that it might be convenient to explicitly specify z-index of a menu container. As web applications become more complicated, the number of various elements on a page increases. Modal windows, tooltips and other floating elements should interact nicely with each other. Proto.menu now has a zIndex option (which is internally used to set iframe z-index properly)
new Proto.Menu({
...
zIndex: 500,
...
})
“beforeShow”, “beforeHide” and “beforeSelect” callbacks
Callbacks is something every extensions developer should consider adding to their scripts. They allow users to intercept script execution at certain moments – add, change or stop certain behaviour. Proto.Menu now supports 3 callbacks: beforeShow is called every time the right click occurs but before the menu was positioned and rendered. If you wish to intercept the left click on a document which “cancels” the menu, you can now use beforeHide callback. Note that it’s not executed on menu item selection, we have another callback for that – beforeSelect is executed after the menu item was clicked but before the menu container was hidden and item callback invoked. Note that all callbacks get an event object as a first argument.
document.observe('click', function(e){
if (this.container.visible() && !e.isRightClick()) {
this.options.beforeHide(e);
this.container.hide();
}
}.bind(this));
Better callbacks
Menu item callbacks sucked a lot in previous version. There was no way to get neither reference to a clicked element, nor anything else. This was probably one of the most requested features. To make everyone happy, callbacks now get event object as a first argument. You can now easily access any event’s properties/methods such as target (clicked element), mouse position, and others.
var menuItems = [{
name: 'Select all',
callback: function(e){
if (e.target.match('input[type=checkbox]')) {
e.target.up('form').select('input[type=checkbox]').each(function(el){
el.checked = true;
})
}
}
}, {
...
}]
...
“className” option
Another highly requested feature (and one of the big drawbacks of previous version) was a lack of descriptive images in menu items. Images definitely take user interface on a next level. Not only visually pleasing, they let us make decision faster and be more productive. Any menu item, besides name callback and other options, now supports a className which is then assigned to an anchor element. Image based menus have never been easier!
Semantic markup
The last but not least of the new features is a proper markup of a menu element. Instead of just set of links (I can’t believe I made it this way), the structure now actually represents its true essence – unordered list of anchor elements. Making the web a somewhat meaningful environment is definitely the right way to go – interface elements should represent their purpose and try to be more user-friendly. As usual, I am always looking forward to any bug reports/suggestions or just any feedback about this extension. Check out a
demo page
and have fun!
P.S.
Just to make things a little tidier, the extension now has an extensive set of unit tests (svn). Unit tests are a wonderful way to maintain proper cross-browser functionality and behavior. Please let me know if you find any of them failing so that the bugs can be take care of quickly.
Version 0.6 is most likely the last one to be released under this name. Proto.Menu has been ported to a Prototype-UI framework and will continue to be developed as one of its components. UI.ContextMenu supports shadow, submenus, verious themes (including Mac OSX and Leopard ones) and is deeply integrated into the framework’s core. For a sneak preview of what to expect check out latest examples
staaky said:
#Love the new look, especially the desktop theme, super clean.
Nice updates.
One thing I noticed in the CSS is the use of multiple classname notation. I know that there was something about that in IE(6). I think it’s only picking up the second classname when you use .first.second , might be worth looking into.
Don Albrecht said:
#This is excellent work. What I appreciate most, however, is your clear and detailed description of the decisions you put into building this release. Such lucid comments can be few and far between, but reading them helps us all to be better developers. Thank you for sharing.
Jota said:
#Excellent work. I still didn’t test it but it is looking fab.
Congrats.
Venu Reddy said:
#Nice work its looks awesome.
kangax (article author) said:
#Guys,
thanks for a feedback!
@staaky,
Good catch. I’ll definitely take a look at this issue.
Roland said:
#Wasn’t
.observe('contextmenu', Event.stop)deprecated in 1.6?kangax (article author) said:
#Roland,
What exactly was deprecated?
As far as I know that’s the best way to prevent contextmenu event on menu items (which was considered a bug in previous version).
Edje said:
#Very cool menu! I’m having trouble enabling disabled menuitems when certain elements on the page are right clicked. How do I do this? I’ve tried creating an onBeforeShow functions and messing with the menuItems, but no luck….
Can you help me?
albert said:
#Hi;
Very elegant solution.
¿¿ its posible to make “sub-menu” on pop-up menu ??
thks for u good work.-
Ludwig said:
#Hi,
first of all i have to say, great work you have done with this context menu.
But i wondering is it to use for example for items in a tree? and for this i guess it is nessesary to have the possibility to ad some attributes. For examples ids…
is there a way to to this?
i am not a really good programmer, because of this i ask
would be cool to have this menu for using in a treelist
best regards Ludwig
Carl said:
#It does not work in Opera 9.24.
Carl
Michael Sharman said:
#Great work! Just some small things on the documentation I found.
1. An extra closing brace is needed after the ‘Save’ menu item
2. When instansiating a new Proto.Menu the ‘selector’ comment says the following:
// context menu will be shown when element with class name of “contextmenu” is clicked
However the example is “contextArea” (not “contextmenu”) and it should be the element id, not class name.
Fantastic work :)
edy said:
#I have a problem. I made a page with it and I have an error:
Error: $(document.body) has no properties
File: http://86.106.82.67/js/proto.menu.0.6.js
Line: 51
Why?!?!
Justin said:
#Quite a lovely little script you’ve got there!
It works wonderfully for me on a page I initially load right from the server, but if for instance I add new content to that page with an AJAX call, the context menus don’t work (don’t show up with a right-click) on the new content (yes, the new content includes tags with the appropriate className selectors that work just fine on the original content). I would presume this is because the Proto.menu script needs to somehow reinitialize the DOM to notice this new content. If I’m correct in this assumption, how would I go about doing this? There doesn’t seem to be a method I call that would reinitialize the DOM.
So… the way I’ve gotten it to work thus far is to create a new Proto.Menu object instance every time I get an AJAX response with new content back from my server …which will eventually be quite frequently. I don’t know how well this will hold up under stress yet—if the old objects will be garbage collected and whatnot or if the users browser will eventually just freeze up. Any guesses? I suppose I’m just wanting some verification that this is how your cute little context menu library was intended to be used.
Thanks so much!
Justin
J. A. Rodriguez said:
#Hi,
I noticed a bug here:
this.options.fade = this.options.fade && !Object.isUndefined(Effect);
If I declare fade: true, just for kicks, without having the Effect library, this line should force fade = false for me, right? Well, it seems that Object.isUndefined(Effect) doesn’t work as expected here because passing an undefined parameter to the function triggers an uncaught exception anyway. I first caught the error in Firefox 2, but this also occurs at least in Safari 2 and Explorer 7/6 (not that I particularly care). So, I changed the line to a more Java-like verbose/redundant thing:
try{ Effect; }
catch(e){ this.options.fade = false; }
If there’s a more efficient way, please implement it that way and let me know.
Cheers
kangax (article author) said:
#@ J.A. Rodriguez
Ahh… I stumbled upon this bug once.
Try changing
Object.isUndefined(Effect)toObject.isUndefined(window.Effect)I’m pretty sure it will work.
Best,
kangax
J. A. Rodriguez said:
#@kangax:
Yep, that did the trick. Thanks and keep up the good work!
John Norris said:
#Hi Kangax, nice work. Just installed P1.6.0.2 though and it it broke under IE 6. That is, I just get some messages flashing in the status bar about downloading pictures but no menu! P1.6.0 is fine though.
fearphage said:
#Any chance you could change the event trigger for Opera to holding the left mouse button down for a brief period or some other mouse-only action. For reference, there is a way to circumvent Opera’s behavior if you really want to work for. The trick is to place a button element under the mouse button on mousedown. Buttons are the only things with no right-click menu. Enjoy.
fearphage said:
#If you are going to attempt to the hack, wrap the button element in a div and make the div hidden or however you want because there is a setting in Opera where you can disable form styling. Also, you may know that you can disable ‘Allow scripts to receive right clicks’ in Opera as well. Just a heads up.
kangax (article author) said:
#@fearphage,
Well, that would be just great! I’ll definitely give it a try once I get a chance. Thanks.
KD said:
#what would be the best way to display the menu upon left click rather than right? Thanks.. great menu btw.
evilek said:
#Hey, just downloaded Firefox 3.0b3 and menu is not working… :[
arma said:
#Nice menu! But there’s a problem in calculation left position in ie7 i think. The code here:
left: ((x + elDim.width + this.options.pageOffset) > vpDim.width
? (vpDim.width – elDim.width – this.options.pageOffset) : x) + ‘px’,
gives me -247px. I couldnt figure out whats happening. Hope you solve it!
kangax (article author) said:
#@KD
You could find a snippet in a code where “contextmenu” event handler (or ctrl + click for Opera) is attached to all elements and change it to “click”.
@evilek
There were some issues with prototype.js 1.6 and Firefox 3. They are resolved in version 1.6.0.2. Once you update, the Proto.Menu works as expected on latest Firefox.
@arma
Which prototype version are you using? Could you give a little more information about when this bug occurs?
Jaime said:
#Hi kangas,
This menu is so cool and so easy to use. I’m having problems trying to use it inside a web part on MOSS. I declare Prototype and Proto.Menu libraries in my code, but no menu is shown on IE7. The difference between MOSS page and your example page is the HTML declaration only. If you delete this line from your example page, the menu will not work:
I tested on Firefox and works fine. Can you tell me why IE7 doesn’t show the menu if the web page hasn’t the above line???
Thanks.
kangax (article author) said:
#@Jaime
Which line are you referring to?
Jak said:
#I am using the latest firefox 2.0 and right clicking does nothing.
When I do a ctrl+left click, I get the menu, but it is of course underneath the standard firefox menu.
It could be some of my add-ons which listen on right mouse double-clicks break your script.
I dont know, but I like the script and would like to include it in a site I am working on.
Gene said:
#Take a look again at a previous comment. I spent some time fighting with the same issues:
Great work! Just some small things on the documentation I found.
1. An extra closing brace is needed after the ‘Save’ menu item
2. When instansiating a new Proto.Menu the ‘selector’ comment says the following:
// context menu will be shown when element with class name of “contextmenu” is clicked
However the example is “contextArea” (not “contextmenu”) and it should be the element id, not class name.
Fantastic work :)
kangax (article author) said:
#@Gene
Thanks! Just changed it.
Jaime said:
#Sorry about the line, kangas.
This is the HTML declaration which I’m refering:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
This is the first line of your HTML page, but in Sharepoint doesn’t exist.
Jaime said:
#Hi again Kangax,
I solved the problem and is the HTML declaration of the page. By default, MOSS doesn’t have the Doctype declaration in its page, but it could be modified in the master page of each site. Once I’ve written the doctype the menu worked fine.
Sorry for this and thanks for your time.
Jak said:
#my last comment was not that clear.
Im running firefox 2.0.0.10, when i right click, the menu appears, but my firefox right-click menu then appears on top of it.
So unless I click, on the bottom 3rd of the browser (where the menu shows up above the mouse, and the firefox menu below the mouse) this thing does not work in my browser.
I tried in IE, it worked as desired.
I am using http://yura.thinkweb2.com/scripting/contextMenu/ as a benchmark.
I cant be the only person experiencing this problem.
kangax (article author) said:
#Jaek,
 
Nobody has yet reported such issue and my tests pass successfully in Firefox 1.5+.
I have a feeling that the problem lies within either Firefox extension or a greasemonkey script.
Could you try running the script in a “clean” version?
Thanks,
kangax
Bhupesh said:
#Hi Kangax,
Hope you are doing Great……
I am having a bug in Proto 1.6.
I am working on IE7 and Mozilla firefox(Above 2.0)
As you aware of that, both Browsers support multiple tabs….
If I am working on Multiple tabs in IE7, and Mozila firefox(Above 2.0)…, The proto menu is not invisible….
If I am minimize and maximize the browsers, then the proto menu should be invisible…
Can you please have a look at that… and Hope you will fix this…..
Thanks for your Proto Menu…
with Thanks
Bhupesh Mohan
Bhupesh said:
#Hi Kangax,
I found one more Bug in it…
I am using more than 3 DIV tag, I am just using the Proto Menu for the second div…..
So when I am right click in both first and second DIV, then ProtoMenu is not InVisible,, Please check out this bug also…
Thanks
Bhupesh Mohan
Gary Vidal said:
#I noticed when I used menu in complex layout the vpDim.getDimensions() was returning 0 for all coords. I slightly modified code to use clientHeight, clientWidth for IE and it worked properly.
From the simple example it worked properly.
var x = Event.pointer(e).x,
y = Event.pointer(e).y,
vpDim = this.ie ? {width : document.body.clientWidth,height: document.body.clientHeight} : document.viewport.getDimensions(),
vpOff = document.viewport.getScrollOffsets(),
Dodg3r said:
#Hi kangax,
it’s awesome, big thx for that!
Is it possible to have submenus, or is it a planned feature?
It is really very fast and lightweight and the only thing i really miss, is the submenu thing.
Dodg3r
Jak said:
#in IE7 i am getting a bit of a strange error:
line 37, character 4, seperator is null or not an object.
i see what it is referring to, but I am not sure what is wrong.
of course in firefox it works fine, in IE, basically nothing happens after this error.
my system in IE7, on windows vista German
jusuff said:
#In Opera menu wont show if you click on image. There is default action (save image as…) from click + ctrl on images.
I don’t know if there is possibility to prevent this default action, however click with alt or shift don’t trigger this action, so maybe this keys could be better then ctrl?
Igor said:
#Hi!
1. Thanks for menu.
2. Why did you write this in line 55?
if (this.container.visible() && !e.isRightClick()) {instead of
if (this.container.visible()) {Isn’t it native for context menus to hide if other menu has appeared?
If you’ve came across something special to make this decision then please share
Igor
Igor said:
#Addition to previous post.
I had to add listener on Document onContextMenu event to hide menu in IE.
ps. А можно на русском вопрошать? :)
cappac said:
#I was trying hard to integrate your extension into my webmail app for the last 2 days.
Well, I was lucky! Thanks for sharing your excellent work!
I integrated two different context menus (for folder and maillist) and suddenly noticed quite some delay between pageloads on IE. Thus I adapted the script a bit to instantiate new Proto.Menu objects on the 1st right-click only. I like it better this way, even if now the first right-click causes the delay…
To get a picture visit http://www.hive2.com/demo.html
Thanks for any feedback!
AaronB said:
#To add additional triggers for your menu:
Keep a reference to the menu object (here cmenu)
var cmenu = new Proto.Menu({ ... });Use bindAsEventListener to correctly setup the .show method as an event handler.
$('clickhere').observe('click', cmenu.show.bindAsEventListener(cmenu));The above code makes the menu show up when someone left-clicks the ‘clickhere’ element, without interfering with the normal right-click behavior.
Any event, like mouseover, could be used in place of click.
Lee said:
#AaronB:
I was looking for something like what you said. I want to have the menu triggered by onmouseover in some cases but in other cases by the normal right click. I will try out your example soon.
However, kangax I would consider the triggering event to be an important parameter that should be available when initializing the object.
Lee said:
#As long as I am talking about it, there are more parameters that could make this menu more versatile (I am really enjoying this prototype menu if I am getting into it like this):
-triggering event, e.g. ‘click’ or ‘mousedown’
-relative position of the menu (top-left, top-right…)
-although scriptaculous’s Fade is great, replace that parameter with a callback e.g. onAppear:function(domObj,e){new Effect.Fade(domObj);},onFade:function(…
AaronB’s suggestion really works, so thanks. This menu is already looking great on one of my sites, very impressive.
Lee said:
#Nevermind, I see that these are already addressed in the post. Major kudos to the author.
Thomas said:
#I started reading all theses posts to see if my question was already answered but wow theres alot of them. I gave up tho. So anyway I was just wondering if it is possible to could be possible that clicking on an element say a link or image that the menu would adjust accoringly. I am creating a web based music app and it would make it sweet as crap to have a right click context sensitive menu. Thx
Dean said:
#I am getting an error with the following line of code: “$(document.body).insert(this.container.insert(list).observe(‘contextmenu’, Event.stop));”
firefox is saying $(document.body) has no properties
:(
Arj said:
#Has anyone else noticed that Opera doesn’t play nice when ctrl+clicking images? If I try and set a proto-menu to an image then ctrl+clicking doesn’t work because opera intercepts it before it gets to the JavaScript…apparently ctrl+click in opera on an image means “I really want to download this”.
Mutter grumble. Is there a way around this?
kangax (article author) said:
#@Thomas
What exactly do you mean by “adjust accordingly” ?
@Dean
You probably forgot to wrap the code with “document.observe(‘dom:loaded’, function(){ … })”
@Arj
Sorry to hear that. As a last resort, you could probably change “ctrl+click” to “alt+click” (or any other alternative) in Proto.Menu source.
Arj said:
#Many thanks Kangax (The Demi-lich, Baldurs Gate?), I looked for the command to change but couldn’t see it. I’ll check again.
As for Thomas I think he means having different context menus for different elements. The answer to this is a simple yes Thomas, just set up two different context menus (myMenuItems and myMenuItems2)
then
//First context menu attached to #contextArea1
new Proto.Menu({
selector: '#contextArea1',
className: 'menu desktop',
menuItems: myMenuItems
})
//Second context menu attached to #contextArea2
new Proto.Menu({
selector: '#contextArea2',
className: 'menu desktop',
menuItems: myMenuItems2
})
kangax (article author) said:
#@Arj
Wow, you’re the first person to find the origin of my nickname (for the past 8 years) : )
There’s a line in Proto.Menu: “if (Prototype.Browser.Opera && !e.ctrlKey) {” where you could change e.ctrlKey to any other modifier.
Hope it helps.
trunkz said:
#I had this same problem. solution is below. just added the “if (item) {” piece.
this.options.menuItems.each(function(item) {
if (item) {
list.insert(
new Element('li', {className: item.separator ? 'separator' : ''}).insert(
item.separator
? ''
: Object.extend(new Element('a', {
href: '#',
title: item.name,
className: (item.className || '') + (item.disabled ? ' disabled' : ' enabled')
}), { _callback: item.callback })
.observe('click', this.onClick.bind(this))
.observe('contextmenu', Event.stop)
.update(item.name)
)
)
}
}.bind(this));
juergen said:
#hi,
is it possible to enable / disable a menu item on the fly?
I want to enable an item or disable it in some specific cases.
thx
juergen
Jak Sprats said:
#thx trunx it worked … after alot of deleting my cache and restarting IE ….
kangax, maybe put this trivial fix in the next release, as a browser compatibility fix (i think it cant harm anything). without this fix i get a truly evil ie warning where my page gets 404ed.
Another nice documentation improvement would be to have a step 5 (on the demo page), saying basically ‘create a div (or element) with id of “contextArea”‘. This documentation is present, but in the code snippet (which is less commonly read)
wastedspace said:
#Hi,
Great piece of code!
However, I have a number of icons on a page, where I have a context menu for each. If I click on each of them (without clicking outside of the menus to make them disappear), I am left with all menus open, and overlapping each other (btw I’m just doing simple left-clicks here).
Is there a way to hide all open menus when clicking on another? I couldn’t seem to find anything in the code that would help.
Thx!
Steve Kahler said:
#Thanks for the great code.
I’m using it in Virtual Earth map application where they right click get your proto menu and execute javascript code which does things on the map.
Unfortunately, when they right click and then don’t do anything on the menu the menu stays there even when you click into the map. The VE map class VeMap is capturing the mouse clicks and so does my app thru VE. It’s kind of a show stopper for us. Other than that we like the menu app very much.
Is there anyway I can exec some code which will make the menu go away ? When they click on the map the menu should go away and I can capture the map click event.
Thanks, Steve Kahler
Steve Kahler said:
#Thanks for the great code.
I’m using it in Virtual Earth map application where they right click get your proto menu and execute javascript code which does things on the map.
Unfortunately, when they right click and then don’t do anything on the menu the menu stays there even when you click into the map. The VE map class VeMap is capturing the mouse clicks and so does my app thru VE. It’s kind of a show stopper for us. Other than that we like the menu app very much.
Is there anyway I can exec some code which will make the menu go away ? When they click on the map the menu should go away and I can capture the map click event.
Thanks, Steve Kahler
Steve Kahler said:
#Forget it, I figured out that by adding this function to the Proto Menu code:
hidemenu: function() {
this.shim.hide();
this.container.hide();
}
And calling it when the click event happens it works great. Now when you click on the VE map the menu disappears.
Steve Kahler said:
#Does it do hierarchical or multi level menus ?
kangax (article author) said:
#@Steve
Submenus are not supported, since I wanted to keep script as small and simple as possible. Regarding #hide, I should probably add this as part of an API. Cases as yours (when click event is being intercepted) seem to be pretty common lately.
Thanks for all the feedback!
Ronan said:
#Great code! I used the old version as well. I am having a problem though, I can’t seem to access the element below the iframe. I am trying to get the details of the element clicked on into the callback functions. Any ideas?
Thanks again,
Ronan
kangax (article author) said:
#@Ronan
“beforeShow” callback receives event object as a first argument. Have you tried retrieving an element via that event’s target (or #element) ?
Ronan said:
#The ID is no longer being set using id: paramater in the menu item. Is there another way to set the id?
Ronan said:
#Added:
id: item.id,
After title: item.name, on line 42
stewart said:
#hi
proto.menu is a very nice application, but I have to make a menu with “sub-menu” for others options like this example : http://www.javascriptfr.com/codes_image/normal/25023.aspx. Is it already possible to do this with proto.menu ?
thanks
Anders Jenbo said:
#Heres a addition to the script that will alow you to update the attachments so that it will work better in an ajax like aplication.
after line 68 add this chunk
//———————————-
reattach: function() {
$$(this.options.selector).invoke(‘stopObserving’, Prototype.Browser.Opera ? ‘click’ : ‘contextmenu’, null);
$$(this.options.selector).invoke(‘observe’, Prototype.Browser.Opera ? ‘click’ : ‘contextmenu’, function(e){
if (Prototype.Browser.Opera && !e.ctrlKey) {
return;
}
this.show(e);
}.bind(this));
},
//————————————————————
this will also requre you to initiate the menu a little differently. You must keep a reference to each menu so that you can call it when changes to the DOM tree has ocured.
so instead of.
new Proto.Menu({
selector: ‘.contextmenu’,
className: ‘menu desktop’,
menuItems: myContextMenu
})
Simpy do this.
var myContextMenuReference = new Proto.Menu({
selector: ‘.contextmenu’,
className: ‘menu desktop’,
menuItems: myContextMenu
})
Then each time you alter the DOM in a way that addes new items that should have a right clic menu you just call myContextMenuReference.reattach();
This is much better then creating a new instance of the menu each time as that would generate a new bunch of html for the menu each time and add yet anothere usless event loader to alle the elements that displayes the menu. One thing to not here is that all events for right click (left click in the case of opera) will be remove each time you call .reattach(); you can comment out line 70 if that is an issue for you (will add usless event listeners on each reattach() call).
Hope this helps more users like Justin and I
Shellster said:
#Is there any chance that you are planning to support multi-level context menus? For instance, I would like to navigate to ‘Save’ in my menu and then have another menu pop out with different save options.
JMM said:
#how can I make the selector is the whole page, without adding an ID to the body tag???
AJenbo said:
#simply write body, just like in css
kangax (article author) said:
#@JMM
Either ‘body’ or ‘html’ should do it.
Josh said:
#Hi,
I’ve found an issue when trying to remove the spacing between the separater:
.menu.desktop li.separator {
border-bottom: 1px solid #fff;
background: #aaa;
margin: 1px 1px 0 1px;
line-height: 1px !important;
}
If I set the margin: to a negative value e.g margin: 1px 1px -1px 1px; the rollover effect renders strangely? if at all. (This only happens in IE 7)
kangax (article author) said:
#@Josh
The “rollover effect” is defined purely via CSS. I’m guessing that’s an IE7 glitch.
Hope this helps.
Hiren said:
#easiest way to allow left click on menu is to replace the line with code:
$$(this.options.selector).invoke('observe', Prototype.Browser.Opera ? 'click' : 'contextmenu', function(e){
with
$$(this.options.selector).invoke('observe', Prototype.Browser.Opera ? 'click' : 'click', function(e){
Giancarlo said:
#Hi, I’m using your proto.menu and I second ronan in adding id: item.id after title: item.name, on line 42 to reference it correctly in a multilanguage application (where you can’t be sure of the item name). Also I didn’t find a way to activate menu elements in context (such as disabling some links if an action cannot be done on the current clicked element). Best way to do it would be in my opinion to add a callback to each element in menuItems or a global callback and evaluate the response to show the item.
m.reza karimirad said:
#Hi.
This is a Great prototype Extension.
I have a site constructed with prototype.1.5.js and want to add this proto.ment to it .
but I want proto.menu v0.3 that is compatible with prototype.1.5.js.
any one can give it to me.and send it to my mailbox please.
i can not simply change my web site prototype.1.5 to prototype.1.6. and i am not familiar with svn.
please help me.
my site is : azaranweb.org
Mow said:
#Hy, I’m using your Proto.Menu, and testing it with IE8 and I found that it does not work with this.
Thanks for your work.
AJenbo said:
#IE8 is still just in beta and it’s renderer isn’t finished yet, theres a good change that this menu will work once IE8 final is released or in some later Beta/RC.
kangax (article author) said:
#Mow,
Even Prototype.js’ test suite does not fully pass in IE8. Since IE8 is still in its infancy, making Prototype.js fully IE8-compliant is a low priority at the moment.
Mow said:
#Yes, I know, I just told about IE8 to do know, for if it was not known, thanks for the answers :)
aito said:
#Demo Download ?
Adam said:
#you might want to change:
to:
otherwise, since your definition of
.menu.google a(shown below) gives the user a false impression that a disabled menu item is clickable. it’s a subtle point, but important as far as far as a user is concerned.kangax (article author) said:
#Thanks, Adam. I’ll make sure to fix that.
Chris said:
#hello,
I experience a bug with IE6 on winXP SP3.
the context menu is just not showing – no js-errors.
works in firefox alright though.
setup:
– kfceditor 2.0.6
– wrote a plugin to select html files for editing in kfc
– plugin opens in a standard kfc-dialog window
– put all the neccessary stuff into this plugin page(the one that opens in the kfc-dialog)
-> not working in IE6 which means: context menu never shows up.
– ??? any ideas ?
best regards
chris
William Morris said:
#Would very much like to implement proto.menu on our systems, but it’s not quite so plug’n'play as the docs would suggest. Is there a forum where a person could get technical/community support, or should I just pose my questions here?
Just in case:
The menu comes up, not at the right-click location, but below all other content. What am I missing to make it appear at the mouse’s location?
When a second menu is selected (in our current, live system there are eight), shouldn’t the first go away?
I’ve confirmed that both the JS file and the CSS file are correctly referenced, but the results aren’t what I expect. I tried the “edit” class – but the menu still appears as an unordered list.
A much simplified example of what I’m doing is here: http://support.seritas.com/killme.asp
IE7, WindowsXP SP3; Also Firefox 2.0.0.20
Thanks in advance. With my given deadlines I’ve invested as much time as I can afford, so I’m hoping there’s just something simple I’m missing.
AJenbo said:
#it can be a little wonky if you are inside a overflow scroll area.
William Morris said:
#re: AJenbo and overflow areas…
Nope, nothing like that. I took my page (the real one is much, much longer) and trimmed it down to as small as I could make it, with only the necessary javascript and content: a couple of DIVs, a table, and some styling. Still couldn’t get it to work the way it does in the demos.
AJenbo said:
#post a link to your attempt and we can look at what is wrong.
William Morris said:
#AJenbo: Cool! The link is http://support.seritas.com/protoMenuTest.asp, changed from “killme.asp” in my original post to make it a little less threatening :)
AJenbo said:
#It’s preaty simple, you removed the menu style class from the menu so it’s not being styled properly. just set it to “myContextMenu menu” instead of just “myContextMenu”.
William Morris said:
#AJenbo, that was just the ticket, and the very thing I missed. The menu displays and looks just as I need it…except that if I have two different menus and right-click for each, the first doesn’t go away with the appearance of the second. Obviously this could cause user confusion – something there’s too much of anyway. Any thoughts there? (Or, again, something I missed?)
AJenbo said:
#No tis is an issue with the scrip, i think it is fairly fixable but as it only happens when multiple menues and no left click betwean right clicking to activade 2 different menues, i havent looked in to it yet. ill post here once i do (hopfully others will to)
Farhan said:
#simply awesome library!
sorry if someone had posted this before..
I notice that the :hover class is not working in safari, I’m on 10.5.2 with Safari Version 3.1 (5525.13). The weird thing is the first time the menu shown, the hover class is not working but after I click and then hold the button, it works.. Anyone had the same issue, how to work around this?
Thank you in advance for any reply..
Lee Linkoff said:
#Nice library.
However, I created a simple test page and it doesn’t work.
When I right click the mouse button, the regular browser popup menu comes up.
AJenbo said:
#Lee, did you try the official demo?
You are probably doing some thing wrong, or you might be using opera and not ctrl+click’ing.
Post a link to you test page and some one might be able to help you.
LeoAjax said:
#Pls, i was try to use the proto menu but maybe im doing something wrong cause i cant c the menu list on my page. Someone can publish a simple example that really works.
Thks for all
AJenbo said:
#The demo page is a simple page that realy works, if you are having truble post your atemtp an maybe we can figure out what you are doing wrong.
Sgwd said:
#hi, my ingles is poor ;)
this proto.menu is great code!
I need help to load the menu items dynamic
I probe with the code, but no working:
var mxProtoMenuItems = new Array();
for (i=0; i
Diabel said:
#It doesn’t work in IE 8. Have any idea why? Can i fix it somehow?
sgwd said:
#Hi kangax,
I work with Symfony 1.0.20 and this version work with prototype 1.5 in this moment.
I probe proto.menu with prototype 1.6 and work fine but my proyect have problem to process forms
Is possible get the version of proto.menu to prototype 1.5?
I wait for your response. Sincerly.
jesusatan said:
#hi
for using with IE8 must download new version prototype
http://www.prototypejs.org/2009/3/27/prototype-1-6-1-rc2-ie8-compatibility-element-storage-and-bug-fixes
Sergio said:
#Hi,
with this changes work fine in Opera.
//$$(this.options.selector).invoke('observe', Prototype.Browser.Opera ? 'click' : 'contextmenu', function(e){
$$(this.options.selector).invoke('observe', Prototype.Browser.Opera ? 'click' : 'click', function(e){
//if (Prototype.Browser.Opera && !e.ctrlKey) { return; }
this.show(e);
}.bind(this));
Kate said:
#ProtoMenu it’s really pretty and usefully library but it isn’t work with newest version prototype library 1.6.0.3:( and I have some conflicts when I use older version of prototype in my web applications. Are you going upgrade ProtoMenu to version 1.6.0.3 of prototype?
kangax (article author) said:
#@Kate
1.6.0.3 is not the newest version; 1.6.1RC1 is. Proto.Menu should actually work with 1.6.0.3 just fine, although I would recommend to upgrade Prototype to the latest release (to take advantage of IE8 compat., and dozens of other fixes/enhancements)
@Sergio
Opera doesn’t support “contextmenu” event (at least not in <= 10a). If you’re OK with activating menu on click in every browser, than – sure – feel free do modify event handler as you wish.
Kate said:
#@kangax
I mean the last stable version …but nevermind I downloaded 1.6.1_rc2 and it really works (with 1.6.0.3 too). I don’t know why it doesn’t work earlier;). Thanks!
Kate said:
#Is it possible to enable/disable a menu item after choice some other menu item?
For example: In context menu I have two options copy and paste. Paste option is normally disabled, but after I click copy – it’s enable.
David said:
#Hi,
I’ve just picked up that Proto.Menu doesn’t work nicely in IE 8.
I implemented Prototype 1.6.1rc2 in order to get it work but I now find that if I apply Proto.Menu to a div (for example) then only when I right click on the text within the div do i see my menu. When I right click on the blank space within the div then it doesn’t show.
Dave
Sergio said:
#@kangax
this is my info of Opera and this work fine whith right button and the changes in
http://perfectionkills.com/protomenu-gets-facelift/#comment-46154
Información de la versión
Versión 9.64
Compilación 10487
Plataforma Win32
Sistema Windows XP
Java Sun Java Runtime Environment version 1.6
Carroll Vance said:
#Internet Explorer 8 seemed to break proto menu on my site. Using the latest version.
Lucas Vasconcelos said:
#Excelent work!
I would to suggest you a feature:
* Allow creation of sub-items
see ya!
Michael White said:
#I found a bug with how new protomenus are initialized. Right now (in Firefox 3) I get a $(document.body) is null error because the page is not fully loaded yet.
I wrapped the “new Proto.Menu(…);” code inside a standard Element.observe(document, “dom:loaded”, function() {…}); and it started working perfectly.
I love this context menu!
Riccardo said:
#Is it possible to enable/disable a menu item after choice some other menu item?
Riccardo said:
#Found it! I’ve wrote a workaround to get the possibility to enable/disable a menu item via javascript.
It’s quite simple.. at the parameter ‘disabled:’ will pass a function that return a boolean value and in the class I’ve added a control after this.options.menuItems.each(function(item) {.
The control is:
if (Object.isFunction(item.disabled))
item.disabled = item.disabled();
I hope it will be useful to someone!
Mark Caudill said:
#This is a bit more dynamic and doesn’t have to be reinitialized each time a new element is added with the same selector:
document.observe(Prototype.Browser.Opera ? ‘click’ : ‘contextmenu’, function(e){
if (Prototype.Browser.Opera && !e.ctrlKey) {
return;
}
var element = e.element();
if (element && (element.match(this.options.selector) || element.up(this.options.selector))) {
this.show(e);
}
}.bind(this));
Mark Caudill said:
#I guess my last post actually had a few bugs in it. The target attribute is still pointing to the lowest-level element, so in the menu callbacks you’d have to account for that and do something similar to e.element().match(this.options.selector) || e.element().up(this.options.selector)…
David Hagler said:
#I’m using your proto menu for a file manager, works terrifically, all of my code was very dynamic, and your menu assumes that a element exists once you create it, which was no the case for me… so I “fixed it”
I added this function:
register: function(element) {
element.observe(Prototype.Browser.Opera ? ‘click’ : ‘contextmenu’, function(e){
if (Prototype.Browser.Opera && !e.ctrlKey) {
return;
}
this.show(e);
}.bind(this));
return element;
},
And fixed the $$(this.options.selector) call in initialize to use it as well… then .. when ever I create a new element I can call my filemenu.register(new Element(‘tr’)).update(‘a singular clickable row element’);
thought this might be usefull
Eric Singleton said:
#Can you have a different menu for different items on a web page? Or you can only have one menu for the entire web page?
AJenbo said:
#When using Prototype 1.6.1 RC3 the only thing missing in IE8 is the hover effect, hopfully ths will have been solved when 1.6.1 comes to its final version.
Michel said:
#Nice script, but i can only add one menu to the page
I want different menu’s on 2 elements
shyam khadka said:
#This protomenu overrides the default UI of browser, means on right click showing options like copy,paste,view source.These options are not shown using this protomenu.
I want to show these default behaviors as well.
Please suggest me
AJenbo said:
#You can implemnt this your self, but not All browsere support it and som gies a warning when it is called from script, the Best option is to not use this on elements where the user might want to copy content.
AJenbo said:
#Michel: Make a new menu but give it a different name…, i have a page with over 4 different menus with no problems.
Lars said:
#Looks great.
Just one question: If I want to use this menu to run an inline-WYSIWYG editor for some div, I would need to call a javscript function and give it the ID of the div that was just right-clicked.
How would I do that?
Andre said:
#Hi,
I’m a novice with prototype however is easy to use and powerful.
The matter is that I need to support IE8 and as I read here I need to use
1.6.1_rc2 to make it work.
But when I use this version I get an error at if (Object.isUndefined(Proto)) -
method not supportet for this object.
Maybe somebody know how to solve this?
Thanks
Andre
fagim sadykov said:
#have posted patch to google.code upgrades proto.menu to be dynamically populated
but i see that the project is very old.
But i used YUI and Google menues and found that them are to hard to setup and large of those size, i decide to upgrade proto.menu to match my requests.
It’s realy live or not?
If not i’ll be glad to commit my changes to repository.
0.7 is beter than 0.6, i think
Durul ÇAMLI said:
#Excellent work. i want to change menu itemd name or disabled, like that but not working can any one help me thanks
var myMenuItems = [
{
name: 'Menu Item 1',
className: 'item1',
callback: function(e)
{
myMenuItems[2].name=’Changed’;
}
}
,{
separator: true
}
,{
name: ‘Menu Item 2′,
className: ‘item2′,
callback: function(e)
{
}
}
Kevin said:
#Hi,
Nice work with proto.menu – neat and does the trick – unlike IE8. I haven’t tried it out with IE7 but since things will continue to move on with IE8 and they will keep some significant market share, any idea how to get proto.menu working in that? The more I work on the web, the most I appreciate the pain the MSIE is..
Cheers,
Kev
AJenbo said:
#@Kevin: simply use the latest vestion of prototype
Kevin said:
#@AJenbo – cheers for the quick reply.
Thing is..I believe I am – I have the test page pointing to Prototype 1.6.1
The only possibility is that I haven’t coded the quick-and-dirty test page properly..however it works fine in FF & Chrome…
AJenbo said:
#@Kevin: hmm i see that i am also using 1.6.1, the menu works except for hover.
Kevin said:
#@AJenbo: thanks again for thoughts. Have you tested it in IE8?
AJenbo said:
#Yes, my last comment was for the results in ie8, it seams to work fully in all other browsers.
Kevin said:
#@Ajenbo: interesting…obviously I’m not having sure luck myself with IE8 – would you mind showing me an example of what you have coded that had proto.menu operting in IE8? Or is there some setting I need to enable in IE8 or something because even the Proto.Menu site itself doesn’t seem to work with regards to the context menu (http://yura.thinkweb2.com/scripting/contextMenu/)?
Kevin said:
#Bump..
any thoughts on above? At least on my IE8 installation, even http://yura.thinkweb2.com/scripting/contextMenu doesn’t put out a context menu – just the stanard IE one…
Thanks.
sabri said:
#thanks kangax , it is fabulous :)
Philip said:
#Hello.
I would like to call this context menu with a right-click OR a left-click.
For example:
I have a table line where customers are listed. If I do a right-click inside the table line I want the menu to be displayed.
At the end of each table line there is a small icon. If I do a left-click on the icon I want the menu to be displayed.
Is there a way to manage these two different calls?
Thanks for your help!
Philip
AJenbo said:
#@Kevin: sorry i can’t show you the site, one thing you could do is force IE8 to run your site as if it was IE7.
BitLite said:
#Great work!
This looks easy to implement and unobtrusive to existing code. However without submenu support it doesn’t really fit the bill.
Stream your torrents instead -> http://bitlite.com
Gean said:
#Hi. Love your script. :)
But it seems to have bugs on IE. I’m using IE8.
offersswa said:
#kroger pharmacy richmond ky [url=http://kamagrasildenafil.over-blog.com/article-kamagra-online-60887120.html#442] kamagra online prescriptions [/url] drugstore shampoos for folliculitis
cvs printable pharmacy coupon [url=http://kamagrasildenafil.over-blog.com/article-kamagra-on-line-60887098.html#374] kamagra on line uk cheap [/url] medicine ball exercises
tappan healthcare pharmacy tappan [url=http://kamagrasildenafil.over-blog.com/article-kamagra-now-60887064.html#241] cheap now kamagra soft [/url] avian veterinary medicine
pharmacy tecnician salaries in texas [url=http://kamagrasildenafil.over-blog.com/article-kamagra-no-60887024.html#657] generic kamagra no prescription [/url] glargine insulin wallmart pharmacy
half moon yoga studio medicine hat [url=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jelly-60887578.html#922] kamagra 100mg oral jelly manual [/url] allergy medicine claritan
aetna pharmacy plan coordination of benefits [url=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jel-60887535.html#391] oral jel online kamagra [/url] walgreen’s pharmacy alvernon and 22nd
cholesterol medicine benefits [url=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-gel-60887505.html#747] gel oral kamagra tablets [/url] pharmacy license in ksa
traditional medicine metabolism [url=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-60887458.html#531] kamagra oral jelly prices australia [/url] dr kang medicine
pharmacy tech jobs in walmart houston [url=http://kamagrasildenafil.over-blog.com/article-kamagra-online-uk-60887418.html#426] buy cheap kamagra online uk generic viagra [/url] leave in arthritis medicine
lakeview internal medicine [url=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jelly-gel-60888883.html#111] gel kamagra oral jelly 100mg [/url] the water pharmacy
medicine hat farmers market hours <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-online-60887120.html#710] kamagra jellyfish online pharmacy’s in kirksville
is behavioral medicine reimbursable <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-on-line-60887098.html#242] kamagra on line uk jelly st peters family medicine lacey wa
pharmacy newark nj <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-now-60887064.html#186] kamagra now philadelphia college of pharmacy and science
assumable morgage medicine hat <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-no-60887024.html#257] no buy kamagra online upper providence pediatric and family medicine
pfs pharmacy westerville <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jelly-60887578.html#660] kamagra oral jelly comparison christ the king church medicine hat
treating gastritis with alternative medicine <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jel-60887535.html#139] link wood double medicine cabinets
online pharmacy california refinance <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-gel-60887505.html#408] link free discount pet medicine
medicine feathers daylily <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-60887458.html#905] kamagra oral jelly comparison brown emergency medicine
rush family medicine rochester <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-online-uk-60887418.html#343] buy cheap online uk kamagra jelly oriental medicine acupuncture ct
good medicine ball sewer <a href=http://kamagrasildenafil.over-blog.com/article-kamagra-oral-jelly-gel-60888883.html#215] gel kamagra oral jelly 100mg walmart mail-order pharmacy