I successfully disabled the right click event on the page that I am working on using jquery. I want to create a customize right click menu. How can I do this? Does this need relevant css setting to get it working (i.e. "position")?
I successfully disabled the right click event on the page that I am working on using jquery. I want to create a customize right click menu. How can I do this? Does this need relevant css setting to get it working (i.e. "position")?
Share Improve this question edited Sep 20, 2009 at 2:13 JoshJordan 13k10 gold badges54 silver badges65 bronze badges asked Sep 20, 2009 at 2:08 kratzkratz 5764 gold badges9 silver badges19 bronze badges 2- I'd recommend you not to do this, unless you give the user the option to turn it off - its annoying, and breaks the "web" way of doing things. For example, if a user wanted to save a image from your website, they wouldnt be able to do so easily (they can still do it, just need to go thru hoops). – Chii Commented Sep 20, 2009 at 3:29
- 7 Not a problem since I am using it to an application for a group on an intranet. – kratz Commented Sep 21, 2009 at 20:23
3 Answers
Reset to default 11There are various jQuery context menu plugins out there, ready to use:
- jQueryContextMenu
- jQuery Context Menu Plugin
This example works, though it is cheesy. What you could do in your contextmenu handler is show a DIV at a specific location on the screen with items of your choosing. As far as I know, there is no way to customize the items within the context menu that appears when you right-click on elements.
<html>
<head>
<title>Context menu test</title>
<style type="text/css">
.element {
background-color: blue;
height: 300px;
width: 300px;
}
.popup {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".element").contextmenu
(
function(e) {
$("div.popup").remove();
$("<div class='popup'>Hi</div>").appendTo("body")
.css("left", e.pageX)
.css("top", e.pageY)
.show();
e.preventDefault(); // return false; also works
}
);
}
);
$.fn.contextmenu = function(func) {
return this.bind("contextmenu", func);
}
</script>
</head>
<body>
<div class="element"></div>
</body>
</html>
There is this plugin too: Audero Context Menu. It is free and very simple to use.