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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

856 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