Solved

Dynamic Context Menu

Posted on 2006-07-19
5
483 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
  • 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now