Multiple Context Menus with different items

Nalsur · Post by **Nalsur** » Mon Aug 01, 2005 4:26 pm

I want multiple context menus in one page.
And I want certain words in the page produce different context menus.

When I right-click over the word "apple", I want the first item in context menu be "green". Other items may remain the same.

In case of "pear" I want the first item be "yellow" and so on.

When clicked on this item in context menu (for ex., "green") the word itself ("green") is put in clipboard.

How it can be done?

Thank you in advance.

Post by **Ruth** » Tue Aug 02, 2005 7:10 pm

Hi Nalsur,

OK, I figured out how to do this. First, I don't know how to write functions, this is
taken from a function written to provide dynamic context menus for a user who
wanted to have the regular one and then a different one when you click a link.
I'm sure there is a way to make it all one function for what you want, but I only
know how to copy the function and renumber it so you have a different function
for each item you had listed. You can see the
dynamic_context_menu demo here which is what I used to make this.

To test it, make a page with the following code

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>multiple context menus</title>
</head>
<body><!--
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2004 (c) Milonic Solutions Limited (UK). All Rights Reserved.
Please visit http://milonic.com/ for more information.

Although this software may have been freely downloaded, you must obtain a license 
before using it in any production environment. The free use of this menu is only available for 
Non-Profit, Educational & Personal Web Sites who have obtained a license to use.

Free, Commercial and Corporate Licenses are available from our website.
You also need to include a link back to http://milonic.com/ if you use the free license.

All Copyright notices MUST remain in place at ALL times.
This includes the first three lines of this notice on every page that uses the menu.
If you cannot comply with all of the above requirements, please contact us to arrange a 
license waiver.
-->
<script type="text/javascript" src="milonic_src.js"></script>
<div class=milonic><a href="https://milonic.com/">
JavaScript Menu, DHTML Menu Powered By Milonic</a></div>
<script	type="text/javascript">
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="contextmenu.js"></script>
<script type="text/javascript" src="multi_context.js"></script>
<br><br>
<a href="#" onmouseover="javascript:mm_toggleContextMenu1()"
 onmouseout="javascript:mm_toggleContextMenu()">APPLE</a>
<P>
<a href="#" onmouseover="javascript:mm_toggleContextMenu2()"
 onmouseout="javascript:mm_toggleContextMenu()">PEAR</a>
<P>
<a href="#" onmouseover="javascript:mm_toggleContextMenu3()"
 onmouseout="javascript:mm_toggleContextMenu()">MELON</a>
</body>
</html>

Next, make a menu data file using this code and save it as multi_context.js

Code: Select all

/// Added for dynamic context menu ///

var contextMenus = new Array();
contextMenus[true] = "contextLink";
contextMenus[false] = contextMenu;
contextState = false;

function mm_toggleContextMenu()
{
  contextState = !contextState;
  contextMenu = contextMenus[contextState];
}


var contextMenus1 = new Array();
contextMenus1[true] = "contextLink1";
contextMenus1[false] = contextMenu;
contextState = false;

function mm_toggleContextMenu1()
{
  contextState = !contextState;
  contextMenu = contextMenus1[contextState];
}

var contextMenus2 = new Array();
contextMenus2[true] = "contextLink2";
contextMenus2[false] = contextMenu;
contextState = false;

function mm_toggleContextMenu2()
{
  contextState = !contextState;
  contextMenu = contextMenus2[contextState];
}

var contextMenus3 = new Array();
contextMenus3[true] = "contextLink3";
contextMenus3[false] = contextMenu;
contextState = false;

function mm_toggleContextMenu3()
{
  contextState = !contextState;
  contextMenu = contextMenus3[contextState];
}

function mm_setUrlToOpen()
{
  _mi[_itemRef][2] = contextObject.href;
  itemOff(_itemRef);
  itemOn(_itemRef);
}


//////////////////////////////////////


_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_subOffsetTop=0               // Sub menu top offset
_subOffsetLeft=0              // Sub menu left offset



//drawMenus();

function Vsrc(){window.location="view-source:"+window.location.href}

with(contextStyle=new mm_style)
{
     onbgcolor="#ECF4F9";
       oncolor="#000000";
    offbgcolor="#ffffff";
      offcolor="#000000";
   bordercolor="#999999";
   borderstyle="solid";
   borderwidth=1
    overfilter="Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=3)"
     pagecolor="";
   pagebgcolor="#eeeeee";
    pageborder="1px solid #ffffff";
    pageimage="db_red.gif";
      onborder="1px solid #316AC5";
separatorcolor="#999999";
     outfilter="randomdissolve(duration=0.4)"
      fontsize="75%";
     fontstyle="normal";
    fontfamily="arial, verdana, tahoma";
 separatorsize=0;
       padding=3
 headerbgcolor="#4F8EB6";
   headercolor="#ffffff";
  headerborder="1px solid #000000";
      fontsize="10px";
      subimage="black_13x13_greyboxed.gif";
if(!mac)onborder="1px solid #000000";
}

with(milonic=new menuname("contextMenu")){
top="offset=2"
style = contextStyle;
margin=3
aI("text=Milonic Home Page;url=/;image=home.gif");
aI("text=Print;url=javascript:window.print();separatorsize=1;image=print.gif"); 
aI("text=Back;url=javascript:history.go(-1);image=back.gif"); 
aI("text=Forward;url=javascript:history.go(1);image=forward.gif"); 
aI("text=Refresh;url=javascript:history.go(0);image=browser.gif"); 
aI("text=View Page Source;url=javascript:Vsrc();separatorsize=1;");
aI("text=Menu Samples;showmenu=Context Milonic DHTML menu samples;"); 
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`"); 
} 

with(milonic=new menuname("contextLink1")){ 
top="offset=2" 
style = contextStyle; 
margin=1 
aI("text=Green;offbgcolor=#00CC99;offcolor=#FFFFFF;
onbgcolor=#CCFFCC;oncolor=#669933;;"); 
aI("text=Item 1;url=#;"); 
aI("text=Item 2;url=#;"); 
aI("text=Item3;url=#;"); 
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`"); 
}
with(milonic=new menuname("contextLink2")){ 
top="offset=2" 
style = contextStyle; 
margin=1 
aI("text=Yellow;offbgcolor=#FFFF00;offcolor=#000000;
onbgcolor=#FFFFCC;oncolor=#993300;"); 
aI("text=Item 1;url=#;"); 
aI("text=Item 2;url=#;"); 
aI("text=Item3;url=#;"); 
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`"); 
}
with(milonic=new menuname("contextLink3")){		
style = contextStyle;
margin=1
aI("text=Melon;offbgcolor=#DD958C;offcolor=#FFFFFF;
onbgcolor=#f5e2e0;oncolor=#DD958C;"); 
aI("text=Item 1;url=#;"); 
aI("text=Item 2;url=#;"); 
aI("text=Item3;url=#;"); 
aI("text=Disable This Menu;url=`javascript:var contextDisabled=true;closeAllMenus();`"); 
}
drawMenus()

You'll see when you test the page, when you right click on one of the words a menu comes
up that goes with that word. When you right click on the page you get the
usual Milonic context menu.

I'm still checking on the copy to clipboard. That is really going to require
another function and I have to see if there's anything I can make work.
If I find something I'll post back. In the meantime maybe someone else
who sees this might get an idea. However, I do know it's not possible to
make a 'copy' button using a function for the dynamic context menu, that
is part of the browser programming, the highlight, rightclick and copy. I
know there are copy functions out there to copy particular text to the
clipboard, usually text in a span or div. Also, be aware that copy to
clipboard is an IE only function.

Hope this helps

Ruth

Nalsur · Post by **Nalsur** » Wed Aug 03, 2005 5:49 am

Ruth, thank you for your suggestion.

In fact I have tried the code you provided using copy/paste method, but I could not get the right clik to work.

But finally I managed to get the whole thing working by manually editting "menu_data.js" file in the way you suggested.

It might be the solution I was looking for.

----

Your idea is to have a separate context menu for every word. But what if there are too many words (let's say 50) on the page each requiring its own menu. It means I have to create a huge menu_data.js file to embrace all the possible context menus.

Ideally I would like to have just one custom menu and pass the name of the first item (green, yellow, big..) as argument from <a href="..." onmouseover="..."> string.

In this example the word specific URL is somehow delivered to context menu "Open in a New Window" item.

I would like to deliver the word specific "item name" to the context menu.

But it does not seem to be an easy task...

Post by **Ruth** » Wed Aug 03, 2005 1:39 pm

Hi,

Sorry, this is the only thing I can do because I do not write functions.

Could you explain more fully exactly what it is you want. As it is it seems as if you are trying to use the context menu to actually open a submenu for each item. Like a popmenu.

Are you saying that each menu is the same except for the first item, or does each item have a different set of links for it? That would be important for the person who might be able to do a function to know.

It almost seems from the picture you gave that you are trying to open a different submenu for each 'word' but open it with a right click instead of a mouseover or a regular onclick using the menu's built in pop function.

Ruth