:: Forum >>

right click menu

I am looking for a way to create a right click menu.
In the Menu would be delete. So that the user would be able to delete the row they right click on.

Anyone have any ideas on how to pull this off?
I have a right click even that is capturing what row I am right clicking on.

Alex, A context menu object might be a nice addition in future releases.




HoseHead
Wednesday, May 17, 2006
Not sure if this will help... but I have a pure Javascript solution that displays a context menu (right-click menu).

Though I believe it only works with IE.
Here it is:

Between <head> </head>:

<style type="text/css">
DIV.men { BORDER-RIGHT:1px solid; BORDER-TOP:white 1px solid; LEFT:10px; VISIBILITY:hidden; BORDER-LEFT:white 1px solid; WIDTH:120px; BORDER-BOTTOM:1px solid; POSITION:absolute; TOP:10px; HEIGHT:48px; BACKGROUND-COLOR:#D6D6D6; z-index:300 }
TD.tdmenu { CLEAR:left; FONT-SIZE:8pt; CURSOR:hand; FONT-FAMILY:tahoma; HEIGHT:16px; }
TD.imgtd { CLEAR:left; VERTICAL-ALIGN:middle; OVERFLOW:hidden; WIDTH:16px; CURSOR:hand; HEIGHT:16px; TEXT-ALIGN:center; SPACING:0px; BACKGROUND-COLOR:#D6D6D6; }
/* show or hide icons... normally 12x12 */
.icondimensions { WIDTH:0px; HEIGHT:0px; }
IMG.emp { VISIBILITY:hidden; }
IMG.arr { WIDTH:6px; HEIGHT:9px; }
</style>

<script type="text/javascript">
var iecheck=document.all&&document.getElementById
if (iecheck)
{ document.write('<script type="text/javascript" src="context1.js"><\/script>') }
</script>

<script type="text/javascript">
if (iecheck)
{
createMenus();
document.oncontextmenu=function()
{ showMenu(event); return false }
document.onmouseup=function()
{ hideMenu(event); return false }
}
</script>

Required js file:
//default/required menu images:
var myi=new Image; myi.src="icons/arrow__r.gif"; //submenu arrow
var myiw=new Image; myiw.src="icons/arrow__rw.gif"; //same as white
var myie=new Image; myie.src="icons/arrow__e.gif"; //empty pic
var myis=new Image; myis.src="icons/spacer.gif"; //spacer
var myisb=new Image; myisb.src="icons/spacer__b.gif"; //enpty end pic left to spacer


var kto=2000; //killTimeout [ms]
var mymenuwidth="160px" //menu width
var bg_color="#D6D6D6"; //colors...
var bg_color_hl="navy"; //syncronize with css file!!
var fg_color="black";
var fg_color_hl="white";
var spc="#SPACER#"; //spacer sign
var arr="#ARROW#"; //submenu sign


// MAIN MENU, DO NOT REMOVE, EDIT ONLY *********
/* Syntax: Array order, menu text+arrow (if expandable), icon (if present), link(action), submenu# (if applicable) */
var m1=new Array;
m1[0]=new Array("");
m1[1]=new Array("Trade","","goto('http://www.fidelity.com')");
m1[2]=new Array(spc); // divider
m1[3]=new Array("Hide Toolbar","","goto('http://www.fidelity.com')");
m1[4]=new Array("Hide Chart Options","");
m1[5]=new Array("Hide Multiple Chart View","");
m1[6]=new Array(spc);
m1[7]=new Array("Time"+arr,"",11);
m1[8]=new Array("Frequency"+arr,"",12);
m1[9]=new Array(spc);
m1[10]=new Array("View"+arr,"",13);
m1[11]=new Array("Zoom"+arr,"",14);
m1[12]=new Array("Pan Trendlines"+arr,"",15);
m1[13]=new Array("Fibonacci"+arr,"",16);
m1[14]=new Array("Remove Last Trendline","","");
m1[15]=new Array("Add Annotation","","");
m1[16]=new Array(spc);
m1[17]=new Array("Chart Settings"+arr,"",17);
m1[18]=new Array(spc);
m1[19]=new Array("Copy Chart Image","","");
m1[20]=new Array("Export...","","");
m1[21]=new Array(spc);
m1[22]=new Array("Open Chart"+arr,"",18);


// name submenus reasonable
// m1## 1.level, m2## 2.level and so on...

// Time submenu
var m11=new Array;
m11[0]=new Array("");
m11[1]=new Array("Intraday","icons/check.gif","");
m11[2]=new Array("2 Days","","");
m11[3]=new Array("5 Days","","");
m11[4]=new Array("10 Days","","");
m11[5]=new Array("1 Month","","");
m11[6]=new Array("2 Months","","");
m11[7]=new Array("3 Months","","");
m11[8]=new Array("6 Months","","");
m11[9]=new Array("YTD","","");
m11[10]=new Array("1 Year","","");
m11[11]=new Array("2 Years","","");
m11[12]=new Array("3 Years","","");
m11[13]=new Array("5 Years","","");
m11[14]=new Array("10 Years","","");


// Frequency submenu
var m12=new Array;
m12[0]=new Array("");
m12[1]=new Array("1-Minute","","");
m12[2]=new Array("5-Minutes","","");
m12[3]=new Array("10-Minutes","","");
m12[4]=new Array("15-Minutes","","");
m12[5]=new Array("30-Minutes","","");
m12[6]=new Array("Hourly","","");
m12[7]=new Array("Daily","","");

// View submenu
var m13=new Array;
m13[0]=new Array("");
m13[1]=new Array("Intraday Ext HMD...","","");
m13[2]=new Array("Tax Lots","","");
m13[3]=new Array("Dividends","","");
m13[4]=new Array("Earnings","","");
m13[5]=new Array("Splits","","");
m13[6]=new Array("Volume","","");
m13[7]=new Array("Price Volume Distribution","","");
m13[8]=new Array("Chart Annotation","","");
m13[9]=new Array("Crosshairs","","");

// Zoom submenu
var m14=new Array;
m14[0]=new Array("");
m14[1]=new Array("Zoom In","","");
m14[2]=new Array("Undo Zoom","","");
m14[3]=new Array("Zoom 100%","","");

// Pan Trendlines submenu
var m15=new Array;
m15[0]=new Array("");
m15[1]=new Array("Trendline","","");
m15[2]=new Array("Snap Trendline","","");
m15[3]=new Array("Support Trendline","","");
m15[4]=new Array("Resistance Line","","");

// Fibonacci submenu
var m16=new Array;
m16[0]=new Array("");
m16[1]=new Array("Fan Lines","","");
m16[2]=new Array("Arcs","","");
m16[3]=new Array("Time Zones","","");
m16[4]=new Array("Retracement Lines","","");

// Chart Setting submenu
var m17=new Array;
m17[0]=new Array("");
m17[1]=new Array("Save","","");
m17[2]=new Array("Save As...","","");
m17[3]=new Array("Set As Default","","");
m17[4]=new Array("Rename...","","");
m17[5]=new Array("Restore Defaults","","");
m17[6]=new Array("Delete Settings","","");

// Open Chart submenu
var m18=new Array;
m18[0]=new Array("");
m18[1]=new Array("New Window"+arr,"",28);
m18[2]=new Array("Replace Current Window"+arr,"",29);

// Open Chart subsubmenu
var m28=new Array;
m28[0]=new Array("");
m28[1]=new Array("List all saved charts","","");

// Open Chart subsubmenue
var m29=new Array;
m29[0]=new Array("");
m29[1]=new Array("List all saved charts","","");



//ENTER MENU IDs of above. UPDATE IF ADD/REMOVE MENUS!
var mvect=new Array(1,11,12,13,14,15,16,17,18,28,29);

// END OF EDITTING. variables ********
var th; //menu height
var tw; //menu width
var vas=0; //on left flag
var llv=false; //menu visible flag
var tid; //timeout id
var ksm=0; //known sub sub menu id


//************** FUNCTIONS
//******** base function to create menus

// error handler ***************
function stoperror(){
return true;
}
window.onerror=stoperror; //suppress potential JS errors.

function createMenus(){
for(xyzzy=0;xyzzy<mvect.length;xyzzy++){
document.write("<DIV id='teva"+mvect[xyzzy]+"' class='men'>");
document.write("<TABLE WIDTH='100%' BORDER=0 CELLSPACING=0 CELLPADDING=0>");
initMenu(mvect[xyzzy]);
document.write("</TABLE></DIV>");
}
}

//******** initialization
function initMenu(t){
var obj=eval("teva"+t); //container
var vect=eval("m"+t); //menu
var ve1; //caption
var ve2; //picture
var ve3; //trick/no of submenu
var spacers=0; //spacer counter
obj.style.height=(vect.length-1)*16+"px";
obj.style.width=mymenuwidth;
if(t==1){
th=obj.style.height.substr(0,obj.style.height.length-2);
tw=obj.style.width.substr(0,obj.style.width.length-2);
}
for(i=1;i<vect.length;i++){
ve1=eval("vect["+i+"][0]");
document.write("<TR>");
if(ve1==spc){
spacers++;
document.write("<TD colspan=3 style='height:8px;'>"+
"<img src='"+myisb.src+"' style='width:3px;height:2px;'>"+
"<img src='"+myis.src+"' style='width:95%;height:2px;'></TD>");
}else{
ve2=eval("vect["+i+"][1]");
ve3=eval("vect["+i+"][2]");
if(ve1.match(arr)){
var oy=16*(i-1)-spacers*8;
document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
"id='m_"+t+"_"+i+"a' onmouseover='act_td("+t+","+i+");showSubMenu("+t+","+ve3+","+oy+");' "+
"onmouseout='nonact_td("+t+","+i+");'>"+
"<img id='m_"+t+"_"+i+"ap' src='"+ve2+"' class='icondimensions'></TD>");
document.write("<TD onmouseover='act_td("+t+","+i+");showSubMenu("+t+","+ve3+","+oy+");' "+
"onmouseout='nonact_td("+t+","+i+");' class='tdmenu' "+
"id='m_"+t+"_"+i+"'>&nbsp;"+ve1.substr(0,ve1.length-7)+"</TD>");
document.write("<td class='imgtd' id='m_"+t+"_"+i+"b' "+
"onmouseover='act_td("+t+","+i+");showSubMenu("+t+","+ve3+","+oy+");' "+
"onmouseout='nonact_td("+t+","+i+");'>"+
"<img class='arr' id='m_"+t+"_"+i+"bp' src='"+myi.src+"'></td>");
}else{
document.write("<TD class='imgtd' style='border:1px solid "+bg_color+";' "+
"id='m_"+t+"_"+i+"a' onmouseover='act_td("+t+","+i+");' "+
"onmouseout='nonact_td("+t+","+i+");' "+
"onclick='eval(m"+t+"["+i+"][2]);'>"+
"<img id='m_"+t+"_"+i+"ap' src='"+ve2+"' class='icondimensions'></TD>");
document.write("<TD onmouseover='act_td("+t+","+i+");' "+
"onmouseout='nonact_td("+t+","+i+");' onclick='eval(m"+t+"["+i+"][2]);' "+
"class='tdmenu' id='m_"+t+"_"+i+"'>&nbsp;"+ve1+"</TD>");
document.write( "<td class='imgtd' id='m_"+t+"_"+i+"b' "+
"onmouseover='act_td("+t+","+i+");' "+
"onmouseout='nonact_td("+t+","+i+");' "+
"onclick='eval(m"+t+"["+i+"][2]);'>"+
"<img class='emp' id='m_"+t+"_"+i+"bp' src='' width='12px' height='12px'></td>");
}
}
document.write("</TR>");
}
if(t==1){
obj.style.height=(vect.length-1)*16-spacers*8+"px";
th=obj.style.height.substr(0,obj.style.height.length-2);
}
}
// on hover **********
function act_td(t,i){



window.clearTimeout(tid);
var obj=eval("m_"+t+"_"+i);
if(t==1)
hideSubMenu();
else
hideKnownSubMenu(t);
obj.style.backgroundColor=bg_color_hl;
obj.style.color=fg_color_hl;
act1_td(eval(obj.id+"a")); //send cell id

act2_td(eval(obj.id+"b"));
}
// on mouse out *********
function nonact_td(t,i){
var obj=eval("m_"+t+"_"+i);
obj.style.backgroundColor=bg_color;
obj.style.color=fg_color;
nonact1_td(eval(obj.id+"a"));
nonact2_td(eval(obj.id+"b"));
tid=setTimeout('showMenu("mousedown")',kto);
}
//******** left=icon cell hover...
function act1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
if(pix.src!=myie.src)
cel.style.border='1px outset';
else{
cel.style.border="1px solid "+bg_color_hl;
cel.style.backgroundColor=bg_color_hl;
}
}
// icon cell on mouse out *********
function nonact1_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
if(pix.src!=myie.src)
cel.style.border="1px solid "+bg_color;
else{
cel.style.border="1px solid "+bg_color;
cel.style.backgroundColor=bg_color;
}
}
//******** right cell for submenu arrow on hover
function act2_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
cel.style.backgroundColor=bg_color_hl;
if(cel.className!="emp") pix.src=myiw.src;
}
//********** same onmouseout........
function nonact2_td(t){
var cel=eval(t);
var pix=eval(t.id+"p");
cel.style.backgroundColor=bg_color;
cel.style.color=fg_color;
if(cel.className!="emp") pix.src=myi.src;
}

// ......................
function showMenu(e){
if(llv==true)
hideMenu();
else{
clearTimeout(tid);
var ah=document.body.clientHeight-th;
var aw=document.body.clientWidth-tw;

if(e.clientY < ah) teva1.style.top=e.clientY;
else teva1.style.top=e.clientY-th;

if(e.clientX < aw) {teva1.style.left=e.clientX;vas=0;}
else {teva1.style.left=e.clientX-tw;vas=1;}

teva1.style.visibility='visible';
llv=true;
tid=window.setTimeout("hideMenu()",kto);
}
}
// ...........
function showSubMenu(c,t,y){
clearTimeout(tid);
var tobj=eval("teva"+c);
var obj=eval("teva"+t);
var ox=tobj.style.left.substr(0,tobj.style.left.length-2);
var oy=tobj.style.top.substr(0,tobj.style.top.length-2);
var oh=obj.style.height.substr(0,obj.style.height.length-2);
var ow=obj.style.width.substr(0,obj.style.width.length-2);
if(vas==0){
if(Math.round(ox) > Math.round(document.body.clientWidth)-Math.round(ow)*2-10)
obj.style.left=Math.round(ox)-Math.round(ow)+2;
else
obj.style.left=Math.round(ox)+Math.round(ow)-5;
}else
obj.style.left=Math.round(ox)-Math.round(ow)+2;
if(Math.round(oy)+Math.round(y) < Math.round(document.body.clientHeight)-Math.round(oh))
obj.style.top=Math.round(oy)+Math.round(y);
else
obj.style.top=Math.round(oy)+Math.round(y)-Math.round(oh);
obj.style.visibility='visible';
ksm=t;
}
//...............
function hideMenu(){
clearTimeout(tid);
teva1.style.visibility='hidden';
hideSubMenu();
llv=false;
}
//.................
function hideSubMenu(){
var obj;
for(j=1;j<mvect.length;j++){
obj=eval("teva"+mvect[j]);
obj.style.visibility='hidden';
}
}
//.................
function hideKnownSubMenu(t){
if(ksm>0 && ksm!=t){
var obj;
for(j=1;j<mvect.length;j++){
if(mvect[j]>t){
obj=eval("teva"+mvect[j]);
obj.style.visibility='hidden';
}
}
ksm=0;
}
}

function goto(url){
window.location=url
}


Tuesday, May 23, 2006

This topic is archived.


Back to support forum

Forum search