Custom HTML/Javascript context menu won't work

Question

I'm trying to make a custom context menu. I'll eventually put in all the options. I tried it in both Firefox and Chrome, and it doesn't even appear. It just shows the default context menu.
Here is my code:

sandbox.html:

<!DOCTYPE html>
<!-- Christian's Sandbox -->
<html>
   <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="Author" content="Christian Arnold" />
    <title>Sandbox</title>
    <link rel="stylesheet" type="text/css" href="sandbox.css" />
    <script type="text/javascript" src="sandbox.js"></script>
  </head>
  <body>
    <div id="contextmenu">
      This is the context menu div.<br />
      Put all your context menu-y things in here.
    </div>
  </body>
</html>

sandbox.css:

/* CSS for Christian's Sandbox */

#contextmenu {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background-color: #ccc;
  color: #000;
}

sandbox.js:

/* JavaScript for Christian's Sandbox */
document.onload = function() { // Make sure this all works

// Context menu script
var contextmenudiv = document.getElementById("contextmenu"),
    contextmenu = {
      hide: function(event) {
        // Hide the context menu div
        contextmenudiv.style.display = "none";
        // Remove the event listener
        document.removeEventListener("click", contextmenu.hide, true);
      },
    };
document.addEventListener("contextmenu", function(event) {
  // Prevent the browser from opening the default context menu
  event.preventDefault();
  // Move the context menu to where the mouse is with respect to the page
  contextmenudiv.style.left = (event.pageX + scrollX) + "px";
  contextmenudiv.style.top = (event.pageY + scrollY) + "px";
  // Display it
  contextmenudiv.style.display = "block    ";
  // When you click somewhere else, hide it
  document.addEventListener("click", contextmenu.hide, true);
}, true);

}

Does Firebug show any errors? I suspect you have a syntax error involving a comma. — Eric Turner
– Eric Turner, Commented Feb 11, 2012 at 23:23
By the way, adding your click listeners on document.bodyinstead of document will be a great idea — dievardump
– dievardump, Commented Feb 12, 2012 at 0:02
Nevermind, I have the whole thing fixed. I'll post how I fixed it tomorrow. — biggles5107
– biggles5107, Commented Feb 12, 2012 at 0:58

biggles5107 · Accepted Answer · 2012-04-16 22:11:29Z

I got it fixed.

What I did was:
I put the contextmenudiv = document.getElementById("contextmenu") into the event listener instead of putting the whole thing into document.onload.

Here is my new code:

/* JavaScript for Christian's Sandbox */

// Context menu script
var contextmenudiv,
    contextmenu = {
      hide: function(event) {
        if (event.button == 0) {
          event.preventDefault();
          // Hide the context menu div
          contextmenudiv.style.display = "none";
          // Remove the event listener
          document.removeEventListener("click", contextmenu.hide, true);
        }
      },
    };
document.addEventListener("contextmenu", function(event) {
  contextmenudiv = document.getElementById("contextmenu");
  // Prevent the browser from opening the default context menu
  event.preventDefault();
  // Move the context menu to where the mouse is with respect to the page
  contextmenudiv.style.left = (event.pageX + scrollX) + "px";
  contextmenudiv.style.top = (event.pageY + scrollY) + "px";
  // Display it
  contextmenudiv.style.display = "block";
  // When you click somewhere else, hide it
  document.addEventListener("click", contextmenu.hide, true);
}, true);

Now, I have effects and a notifications system to go along with it.

Collectives™ on Stack Overflow

Custom HTML/Javascript context menu won't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related