Dynamic Context Menu

Posted on 2006-07-19
Last Modified: 2010-05-18
Hi guys,

I'm looking to create a Dynamic Context menu, but Dynamic I mean I can have loads of arrays, eg:

myArrayA[3].Func='return false;';

myArrayB[0].Func='window.clipboardData.setData("Text", trgObj.value);';
myArrayB[1].Func='trgObj.value = window.clipboardData.getData("Text")';

And I can set different elements of the screen with different menus, eg:

document.getElementById('tagA').oncontextmenu = displayMenu('myArrayA');
document.getElementById('tagB').oncontextmenu = displayMenu('myArrayB');

Any ideas on how I can get this to work guys?

Question by:Cyber-Drugs
  • 3
  • 2
LVL 18

Expert Comment

ID: 17140371
whenever i've done a context menu, i've had a div in the code that i show when the user clicks.  you could write your div out dynamically use JS if you want, with those items.

Author Comment

ID: 17140612
Hi brunobear,

I have some code which does that already, but unfortunately, I don't see how I could make it work with more than one group of div's. I'm going to post the code on here, and if you can see how to alter it so I can change it to be dynamic to do something like this:

document.getElementById('tagA').oncontextmenu = displayMenu('myDivA');
document.getElementById('tagB').oncontextmenu = displayMenu('myDivB');


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>ContextMenu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

     border:1pt solid #808080;

     border:1pt solid #cccccc;
     padding: -10px;
     margin : 0px;
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
     <div class="menuitems" url="" onclick="CopyToClipBoard();">Copy</div>
     <div class="menuitems" url="" onclick="PasteFromClipBoard();">Paste</div>

<script language="JavaScript1.2">
function GetWindowSize()
     this.myWidth = 0;
     this.myHeight = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
          this.myWidth = window.innerWidth;
          this.myHeight = window.innerHeight;
     else if( document.documentElement &&
            (document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          this.myWidth = document.documentElement.clientWidth;
          this.myHeight = document.documentElement.clientHeight;
     else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
          //IE 4 compatible
          this.myWidth = document.body.clientWidth;
          this.myHeight = document.body.clientHeight;
function test() {
     alert('this is a test');

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")

function showmenuie5(e){
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
//position the horizontal position of the menu where the mouse was clicked document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight) document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY;
else document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY;"visible"
var posY = parseInt ( + menuobj.offsetHeight;
var wsize = new GetWindowSize();
window.status = posY + ' ' + wsize.myHeight + ' ' + menuobj.offsetHeight;  

if (posY > wsize.myHeight) {
   posY =  parseInt(wsize.myHeight) - menuobj.offsetHeight - 20;
   window.status = posY ; = posY;
return false

var trgObj = null;
var srcObj = null;
function getTarget(evt) {
  if (!evt) { evt = window.event; }
  if (document.all) { return (evt.srcElement); }
  return (;

function CopyToClipBoard() {
      clipboard = trgObj.value;
      window.clipboardData.setData("Text", clipboard);
function PasteFromClipBoard() {
      clipboard = window.clipboardData.getData("Text");
      if (!clipboard || !trgObj.value) { return; }
      trgObj.value = clipboard;

function hidemenuie5(e){"hidden"

trgObj = getTarget (e);
if (trgObj.tagName != 'INPUT' && trgObj.type != 'text') { trgObj = null; return; }
if (trgObj) { window.status = 'Target is ' + trgObj.tagName; }

function highlightie5(e){
var firingobj=ie5? event.srcElement :
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node"#CFD6E8""1pt solid #737B92""black"
if (display_url==1)

function lowlightie5(e){
var firingobj=ie5? event.srcElement :
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node"#cccccc""1pt solid #cccccc""black"

function jumptoie5(e){
var firingobj=ie5? event.srcElement :
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))"url"),firingobj.getAttribute("target"))

if (ie5||ns6){''


<input type="text" name="txt1" value="Text Value1">
<input type="text" name="txt2">

LVL 18

Accepted Solution

bruno earned 500 total points
ID: 17142915
here's an example - there is obviously a lot more involved w/ positioning etc, but this shows how to do more than one menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

      <style type="text/css" media="screen" title="style">
      div {
            background: #f00;
            float: left;
            height: 200px;
            margin: 30px;
            width: 200px;
      .menu {
            background: yellow;
            display: none;
            height: 100px;
            width: 100px;
menu = {
      init : function() {
            document.getElementById('div1').oncontextmenu = function() {
                  return false;
            document.getElementById('div2').oncontextmenu = function() {
                  return false;
      displayMenu : function(menuID) {
            var menu = document.getElementById(menuID);
            if (!menu) return;
   = 'block';
            return false;
window.onload = menu.init;


<div id="div1">1</div>
<div id="div2">2</div>

<div class="menu" id="menu1">1</div>
<div class="menu" id="menu2">2</div>


Author Comment

ID: 17144622
I am more than happy to re-do all the positioning, but that seems to be exactly what I am after, cheers!
LVL 18

Expert Comment

ID: 17145120
glad i could help, thanks for the A.  :-)

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question