Solved

Dynamic Context Menu

Posted on 2006-07-19
5
491 Views
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[0].Title='File';
myArrayA[0].Func='runFunctionA();';
myArrayA[1].Title='Save';
myArrayA[1].Func='runFunctionB();';
myArrayA[2].Title='Load';
myArrayA[2].Func='runFunctionC();';
myArrayA[3].Title='Exit';
myArrayA[3].Func='return false;';

myArrayB[0].Title='Copy';
myArrayB[0].Func='window.clipboardData.setData("Text", trgObj.value);';
myArrayB[1].Title='Paste';
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?

Cheers!
0
Comment
Question by:Cyber-Drugs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 18

Expert Comment

by:bruno
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.
0
 
LVL 4

Author Comment

by:Cyber-Drugs
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');


Cheers!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ContextMenu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--

.skin0{
     position:absolute;
     width:140px;
     border:1pt solid #808080;
     background-color:#cccccc;
     font-family:Verdana;
     line-height:20px;
     cursor:default;
     font-size:14px;
     z-index:100;
     visibility:hidden;
}

.menuitems{
     padding-left:10px;
     padding-right:10px;
     margin:2px;
     font-family:Arial;
     font-size:8pt;
     border:1pt solid #cccccc;
}
.hritems{
     padding: -10px;
     margin : 0px;
}
-->
</style>
</head>
<body>
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none>
     <div class="menuitems" url="http://dynamicdrive.com" onclick="CopyToClipBoard();">Copy</div>
     <div class="menuitems" url="http://dynamicdrive.com" onclick="PasteFromClipBoard();">Paste</div>
</div>

<script language="JavaScript1.2">
function GetWindowSize()
{
     this.myWidth = 0;
     this.myHeight = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          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
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY;
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY;

menuobj.style.visibility="visible"
var posY = parseInt (menuobj.style.top) + 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 ;  
   menuobj.style.top = posY;
}
return false
}

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

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){
menuobj.style.visibility="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 : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="#CFD6E8"
firingobj.style.border="1pt solid #737B92"
firingobj.style.color="black"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor="#cccccc"
firingobj.style.border="1pt solid #cccccc"
firingobj.style.color="black"
window.status=''
}
}

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

if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}

</script>

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

</body>
</html>
0
 
LVL 18

Accepted Solution

by:
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"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title></title>

      <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;
      }
      </style>      
      
<script>
menu = {
      init : function() {
            document.getElementById('div1').oncontextmenu = function() {
                  menu.displayMenu('menu1');
                  return false;
            }
            document.getElementById('div2').oncontextmenu = function() {
                  menu.displayMenu('menu2');
                  return false;
            }
      },
      displayMenu : function(menuID) {
            var menu = document.getElementById(menuID);
            if (!menu) return;
            menu.style.display = 'block';
            return false;
      }
}
window.onload = menu.init;
</script>
</head>

<body>

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


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


</body>
</html>
0
 
LVL 4

Author Comment

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

Expert Comment

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

710 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