Right Click Menu in a Table

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:24

Right Click Menu in a Table

Poster: bumbumind
Dated: Tuesday November 22 2005 - 17:12:40 GMT

Hi,
I am trying to implement the right click menu inside a table and having some problems. I want to show a different right click menu when the user clicks inside a table and show the browser's default right click menu outside this table.

When I go to my page and right click inside the table first, everything is fine. As soon as I click somewhere else and return to the table I see two menus the Milonic menu and the default browser menu.

I define contextDisabled=false; and in rclick(e) depending on where the right click happens turn the Milonic menu on.

I am posting the HTML and my context.js file.

Any help would be appreciated.

Thanks.

HTML file.

<html lang="en">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

<SCRIPT type="text/javascript" src="/js/menu/milonic_src.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

</SCRIPT>

<title>Inventory</title>

<SCRIPT type="text/javascript" src="/js/menu/contextmenu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
var submitcount=0;
var selectedrow=null;

_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=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset

with(contextStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="menuimages/arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

// Build your sub menus first
with(milonic=new menuname("contextMenu")){
margin=3;
style=contextStyle;
top="offset=2";
aI("image=home.gif;text=Milonic Home Page;url=/;");
aI("image=print.gif;separatorsize=1;text=Print;url=javascript:window.print();");
aI("image=back.gif;text=Back;url=javascript:history.go(-1);");
}

drawMenus();

</SCRIPT>

<STYLE TYPE="text/css" MEDIA=screen>

</STYLE>

</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FFFFFF" ALINK="" VLINK="#FFFF66">

<form name="inventoryForm" method="post" action="/tcmIS/pge/inventory.do" onsubmit="return SubmitOnlyOnce();"><input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="9d8deb5791d28298f11e47cd32460976">

<TABLE BORDER="0" BGCOLOR="#a2a2a2" CELLSPACING="1" CELLPADDING="2" WIDTH="100%">
<TR align="center">
<TH width="5%" CLASS="results" height="38">Catalog</TH>
<TH width="5%" CLASS="results" height="38">Part</TH>
<TH width="15%" CLASS="results" height="38">Description</TH>
<TH width="5%" CLASS="results" height="38">Type</TH>
<TH width="5%" CLASS="results" height="38">Set Point<BR>(RP/SL/RQ)</TH>
<TH width="5%" CLASS="results" height="38">Inv Group</TH>
<TH width="8%" CLASS="results" height="38">Inventory UOM</TH>
<TH width="5%" CLASS="results" height="38">Available<BR>(Last Counted)</TH>
<TH width="5%" CLASS="results" height="38">Held</TH>
<TH width="5%" CLASS="results" height="38">On Order</TH>
<TH width="5%" CLASS="results" height="38">In Purchasing</TH>
<TH width="5%" CLASS="results" height="38">Item</TH>
<TH width="10%" CLASS="results" height="38">Component Description</TH>
<TH width="5%" CLASS="results" height="38">Component Packaging</TH>
<TH width="5%" CLASS="results" height="38">Manufacturer</TH>
<TH width="10%" CLASS="results" height="38">Mfg Part No.</TH>
</tr>

<TR align="center" CLASS="blue" ID="rowId0">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<INPUT TYPE="hidden" NAME="colorClass0" value="blue" >
<INPUT TYPE="hidden" NAME="childRowsSize0" value="1" >
<INPUT TYPE="hidden" NAME="itemId0" value="524907" >
<INPUT TYPE="hidden" NAME="inventoryGroup0" value="DCPP Sodium Hypochlorite 01" >
<INPUT TYPE="hidden" NAME="inventoryGroupName0" value="Sodium Hypochlorite Tank 01" >
<INPUT TYPE="hidden" NAME="catalogId0" value="PGE" >
<INPUT TYPE="hidden" NAME="catPartNo0" value="77-8920" >
<INPUT TYPE="hidden" NAME="partGroupNo0" value="1" >
<INPUT TYPE="hidden" NAME="issueGeneration0" value="Item Counting" >

<TD width="5%" rowspan="1">PGE</TD>
<TD width="5%" rowspan="1">77-8920</TD>
<TD width="15%" rowspan="1">Sodium Hypochlorite - 12.5% bulk</TD>
<TD width="5%" rowspan="1">MM</TD>
<TD width="5%" rowspan="1">0/0/</TD>
<TD width="5%" rowspan="1">Sodium Hypochlorite Tank 01</TD>
<TD width="8%" rowspan="1">gal bulk (10000 gal capacity)</TD>
<TD width="5%" rowspan="1">4,526.5<BR>(11/18/2005)</TD>
<TD width="5%" rowspan="1">0</TD>
<TD width="5%" rowspan="1">2,250</TD>
<TD width="5%" rowspan="1">0</TD>
<INPUT TYPE="hidden" NAME="grandChildRowsSize00" value="1" >
<TD width="5%" rowspan="1">524907</TD>
<TD width="5%">Hasa 12.5% Sodium Hypochlorite Solution</TD>
<TD width="5%">1 gal bulk </TD>
<TD width="5%">Hasa Inc</TD>
<TD width="10%">Sodium Hypochlorite</TD>
</TR>
</TR>

<TR align="center" CLASS="white" ID="rowId1">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<INPUT TYPE="hidden" NAME="colorClass1" value="white" >
<INPUT TYPE="hidden" NAME="childRowsSize1" value="1" >
<INPUT TYPE="hidden" NAME="itemId1" value="524907" >
<INPUT TYPE="hidden" NAME="inventoryGroup1" value="DCPP Sodium Hypochlorite 02" >
<INPUT TYPE="hidden" NAME="inventoryGroupName1" value="Sodium Hypochlorite Tank 02" >
<INPUT TYPE="hidden" NAME="catalogId1" value="PGE" >
<INPUT TYPE="hidden" NAME="catPartNo1" value="77-8920" >
<INPUT TYPE="hidden" NAME="partGroupNo1" value="1" >
<INPUT TYPE="hidden" NAME="issueGeneration1" value="Item Counting" >

<TD width="5%" rowspan="1">PGE</TD>
<TD width="5%" rowspan="1">77-8920</TD>
<TD width="15%" rowspan="1">Sodium Hypochlorite - 12.5% bulk</TD>
<TD width="5%" rowspan="1">MM</TD>
<TD width="5%" rowspan="1">0/0/</TD>
<TD width="5%" rowspan="1">Sodium Hypochlorite Tank 02</TD>
<TD width="8%" rowspan="1">gal bulk (10000 gal capacity)</TD>
<TD width="5%" rowspan="1">8,400<BR>(11/18/2005)</TD>
<TD width="5%" rowspan="1">0</TD>
<TD width="5%" rowspan="1">2,250</TD>
<TD width="5%" rowspan="1">0</TD>
<INPUT TYPE="hidden" NAME="grandChildRowsSize10" value="1" >

<TD width="5%" rowspan="1">524907</TD>
<TD width="5%">Hasa 12.5% Sodium Hypochlorite Solution</TD>
<TD width="5%">1 gal bulk </TD>
<TD width="5%">Hasa Inc</TD>
<TD width="10%">Sodium Hypochlorite</TD>
</TR>
</TR>
</table>
</form>
</body>
</html>

contextmenu.js

/*
Milonic DHTML Menu Context/Right Click Menu Module contextmenu.js version 1.2 - September 1st 2004
This module is only compatible with the Milonic DHTML Menu version 5.16 or higher

Copyright 2004 (c) Milonic Solutions Limited. All Rights Reserved.
This is a commercial software product, please visit http://www.milonic.com/ for more information.
*/

contextDisabled=false; // Set this parameter to disable or enable right click, context menu at runtime.
contextMenu="contextMenu"; // Default name for the contextMenu
contextObject=""; // This is the object the right click occured on, could be an image, link whatever was under the mouse at the point of right click.

function rclick(e){
if (!whichElement(e))
{
_d.oncontextmenu=null
return true;
}

if(_d.all)
{
ev=event.button;
contextObject=event.srcElement
}
else
{
ev=e.which
contextObject=e.target
}

if(ev==2||ev==3){
_gm=getMenuByName(contextMenu)
if(_gm!=null)popup(contextMenu,1)
return false
}
else{
//if(ev==1)closeAllMenus();
}
return true;
}

function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode

var tname
tname=targ.tagName

var targParent =targ.parentNode

//alert("You clicked on a " + tname + " element. Id "+targ.getAttribute("id")+" targParent "+targParent.tagName+" Id "+targParent.getAttribute("id")+"")
if (targParent.getAttribute("id").length > 0)
{
return true;
}
{
return false;
}
}

if(ns4){
_d.captureEvents(Event.MOUSEDOWN);
_d.onmousedown=rclick;
}
else{
_d.onmouseup=rclick
_d.oncontextmenu=new Function("return false")
}

function catchevent(rowid)
{
var selectedRow = document.getElementById("rowId"+rowid+"");
var selectedRowClass = document.getElementById("colorClass"+rowid+"");
selectedRow.className = "selected"+selectedRowClass.value+"";

try
{
var grandChildRowsSize = document.getElementById("grandChildRowsSize"+rowid+"0");
for(k=1;k<grandChildRowsSize.value;k++)
{
//alert("grandchildRowId"+rowid+"0"+(k)+"");
var grnadChildRowId = document.getElementById("grnadChildRowId"+rowid+"0"+(k)+"");
grnadChildRowId.className = "selected"+selectedRowClass.value+"";
}
}
catch (ex)
{

}

var childRowsSize = document.getElementById("childRowsSize"+rowid+"");
for(j=1;j<childRowsSize.value;j++)
{
//alert("childRowId"+rowid+""+(j)+"");
var selectedchildRow = document.getElementById("childRowId"+rowid+""+(j)+"");
selectedchildRow.className = "selected"+selectedRowClass.value+"";

var grandChildRowsSize = document.getElementById("grandChildRowsSize"+rowid+""+(j)+"");
for(k=1;k<grandChildRowsSize.value;k++)
{
//alert("grandchildRowId"+rowid+""+(j)+""+(k)+"");
var grnadChildRowId = document.getElementById("grnadChildRowId"+rowid+""+(j)+""+(k)+"");
grnadChildRowId.className = "selected"+selectedRowClass.value+"";

}
}

if (selectedrow != null && rowid != selectedrow)
{
var previouslySelectedRow = document.getElementById("rowId"+selectedrow+"");
var previouslySelectedRowClass = document.getElementById("colorClass"+selectedrow+"");
previouslySelectedRow.className = ""+previouslySelectedRowClass.value+"";

try
{
var previouslygrandChildRowsSize = document.getElementById("grandChildRowsSize"+selectedrow+"0");
for(k=1;k<previouslygrandChildRowsSize.value;k++)
{
//alert("grandchildRowId"+rowid+"0"+(k)+"");
var previouslygrnadChildRowId = document.getElementById("grnadChildRowId"+selectedrow+"0"+(k)+"");
previouslygrnadChildRowId.className = ""+previouslySelectedRowClass.value+"";
}
}
catch (ex)
{

}

//alert(previouslySelectedRowClass.value);
var previouslychildRowsSize = document.getElementById("childRowsSize"+selectedrow+"");
for(j=1;j<previouslychildRowsSize.value;j++)
{
//alert("childRowId"+selectedrow+""+(j)+"");
var previouslyselectedchildRow = document.getElementById("childRowId"+selectedrow+""+(j)+"");
previouslyselectedchildRow.className = ""+previouslySelectedRowClass.value+"";

var previouslygrandChildRowsSize = document.getElementById("grandChildRowsSize"+selectedrow+""+(j)+"");
for(k=1;k<previouslygrandChildRowsSize.value;k++)
{
//alert("grandchildRowId"+selectedrow+""+(j)+""+(k)+"");
var previouslygrnadChildRowId = document.getElementById("grnadChildRowId"+selectedrow+""+(j)+""+(k)+"");
previouslygrnadChildRowId.className = ""+previouslySelectedRowClass.value+"";
}
}
}

selectedrow =rowid;
}

Poster: Ruth
Dated: Thursday November 24 2005 - 0:02:50 GMT

I'm sorry but I doubt anyone here can help since you've modified the Milonic Bolt-on Module and made it different from what it actually is.

There is a demo for being able to right click and get different context menus depending on whether you right click the page or on a link. Perhaps looking at the function created to do that would give you some ideas.

I'm pretty sure you're not supposed to modify the actual module.

Dynamic Context Menus

Ruth

Industrial Strength JavaScript and DHTML Menus

Right Click Menu in a Table