Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

right click context menu jquery

Does anybody have any code for a jquery context menu? Just need a div popup at pointer position when right mouse button pressed.

like image 717
jimsmith Avatar asked Jan 20 '11 13:01

jimsmith


People also ask

How does jQuery detect right-click?

Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler to the default 'mousedown' JavaScript event. This can be used to trigger an event. The event object's 'which' property can then used to check the respective mouse button.

What is context menu in jQuery?

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site's or trendskitchens' this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects.

How do I create a custom right-click menu?

To make this HTML menu visible when right-clicking in the browser, we need to listen for contextmenu events. We can bind the event listener directly on the document or we can limit the area that a user can right-click to see the custom context menu. In our example, the area for right-click is the entire body element.


3 Answers

Here is a plugin: jQuery Context Menu

like image 21
Subin Avatar answered Sep 28 '22 17:09

Subin


This can easily be achieved by using the event listener in jQuery, here is a clean and fast way of doing it:

//Now add the jQuery
$(document).ready(function() { //Just starting up here
  var menu = $('.menu');//get the menu
  $(document).on('contextmenu', function(e) {//What this does is simply; if right-click, run function(contains an event)
    e.preventDefault();//Prevent the default action: the normal right-click-menu to show
    menu.css({
      display: 'block',//show the menu
      top: e.pageY,//make the menu be where you click (y)
      left: e.pageX//make the menu be where you click (x)
    });
  });
  $(document).click(function() { //When you left-click
    menu.css({ display: 'none' });//Hide the menu
  });
});
/* just some css to display it */
.menu {
  background: #fff;
  width: 60px;
  padding: 3px 10px;
  box-shadow: 0 0 10px -3px rgba(0, 0, 0, .3);
  border: 1px solid #ccc;
  display: none;
  position: absolute;//this is important
}
<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add some HTML for the menu -->
<div class="menu">
  <p>Option 1</p>
  <p>Option 2</p>
</div>
like image 25
codeWithMe Avatar answered Sep 28 '22 17:09

codeWithMe


Here is what I found:

Right Click Context Menu Using Jquery and asp.net - Code Project Article

Plugins tagged Right Click Menu on Jquery website

Interestingly, the dogo library has a standard set of UI widgets, and the context menu is part of that standard UI set. (The dojo library is nice and pretty with a standard look)

Dojo is a separate javascript library just like JQuery. Not sure how completely compatible dojo is with jquery, but there are ways to get them both working together if you want to.

Lord Google gave me most of the answers ;)


Similar SO questions that might be helpful:
jQuery Right-Click Context Menu Help!
jquery context menu plugin - Where is the right click event type?
JavaScript: Capturing right click and disabling menu only within certain element

like image 141
gideon Avatar answered Sep 28 '22 18:09

gideon