Posts tagged ‘javascript’

Building a Custom Right-click Menu in Javascript

4 Sep 2010, 7:27 pm

I’ve been working on a web application project for the last couple weeks and I’ve decided that (since it’s a web application) I should build a custom right click menu, also called a context menu. This resulted in a Google search with plenty of pie (results) but very little filling (substance). Most of the results I got were worthless. Many of them were demos and tutorials for flash, and since I wanted to use unadulterated DHTML and JavaScript they didn’t help much. The results I did get where there was a working custom context menu where either poorly organized, way too long and bulky, or genuinely untrustworthy. So I decided to come up with my own.

The first step is disabling the default context menu (the one you would see if you were to right click somewhere on the page right now. It is pretty easy to disable the right click button in any web page, in fact it’s only one line of code inside the body tag:

1

<body oncontextmenu="return false;">

Next we’ll write the html page where we will be using our menu.

1
2
3
4
5

<html><body onclick="clearMenu()" oncontextmenu="return false;">
    <div onmouseup="showMenu(event)">
        This is where your context will go.
    </div>
</body></html>

You must use onmouseup rather than onclick because the mouse events are not always captured using onclick. You will also want to pass the event as a parameter or some browsers will not support it.

Next we will add another div, the menu, that will be hidden. On the same page (after the other content before the </html>):

5
6
7
8

<div id="menu">
     <a href="http://www.tuesdayDeveloper.com">tuesdayDeveloper</a><br />
     <div onclick="doSomething()">Do Something</div>
</div>

Inside the menu div you can put links, onEvent Links, etc.

Following is the JavaScript, the real fun:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<script type="text/javascript">
function showMenu(event) {
     /*  check whether the event is a right click 
       *  because different browser (ahem IE) assign different numbers to the keys to
       *  your mouse buttons and different values to the event, you'll have to do some evaluation
       */
     var rightclick; //will be set to true or false
     if (event.button) {
          rightclick = (event.button == 2);
     } else if (e.button) {
          rightclick = (event.which == 3);
     }
 
     if(rightclick) { //if the secondary mouse botton was clicked
          var menu = document.getElementById('menu');
          menu.style.display = "block"; //show menu
 
          var x = e.clientX; //get X and Y coordinance for menu position
          var y = e.clientY;
 
          //This section is necessary if you click on the far right edge or bottom
          //The 200 is arbitrary, choose whatever number you want based on how large your menu is
          if(window.innerWidth) {
               windowWidth = window.innerWidth;
               windowHeight = window.innerHeight;
          } else if(document.documentElement.clientWidth) {
               windowWidth = document.documentElement.clientWidth;
               windowHeight = document.documentElement.clientHeight;
          } else {
               windowWidth = document.getElementsByTagName('body')[0].clientWidth;
               windowHeight = document.getElementsByTagName('body')[0].clientHeight;
          }
          if(windowWidth < (x + 200)) {
               x = x - 200;
          }
          if(windowHeight < (y + 200)) {
               y -= 200;
          }
 
          //position the menu
          menu.style.position = "fixed"; // use fixed or it will not work when the window is scrolled
          menu.style.top = y+"px";
          menu.style.left= x+"px";
     }
}
 
function clearMenu() { //used to make the menu disappear
     //this function should be used at the beginning of any function that is called from the menu
     var menu = document.getElementById('menu');
     menu.style.display = "none"; //don't show menu
}
</script>

Following this tutorial you will get the barebonest of the barebones context menu. Obviously you can add style, functionality and whatever else you want. If you have any questions, feel free to ask.

Post Ratings: (No Ratings Yet)
Tags:
Category: Tutorial  |  2 Comments