We help IT Professionals succeed at work.

Right Click in JavaScript

aravindmalai
aravindmalai asked
on
Medium Priority
335 Views
Last Modified: 2008-02-01
Actually we need to provide Right Click functionality in
a Table view ..Ine thing has to be considered is ..on Selection and Right clicking one particular thing it should give some menu itemns..what i mean is for differnt table views ..the right click menu otio should be differnt and in ..in the background if we right click it should show the Browser functionality i.e RIGHT,BACK..etc..we tried out some thing but it showing the same menus in all the places ..it should be like that ..based on selection the menu should change ...
If anybody knows it pl explain with the code
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Wow - Please re-read that and see if you can make any sense

Michel

Author

Commented:
Ok let me Brief u about my problem
I have one Table view with 2 rows and 8 columns .with some table headings .
My requirement is such that ..While doing RIght Click in each table heading differnt menus should come ..
And also if iam selecting in the Non table  Blank place ..it should show the InBuilt Browser functionality..such as BACK,FORWARD..etc..i want to customize the Right click funactionality for each table headers and retain the Right functionality in the Blank areas..
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

Author

Commented:
Sorry Boss
I Have this code before itself ...
I clearly mentioned that ..i should be able to provide differnent Right click menuitems for each views ...
suppose iahaving three table headings ..i should be able to provide with each headings each Right click menuitems ..ok ..and also if iam right clicking the non table area or blank area our custom right click should not come ..witht his code ..we would be able to get the same menus  for  all throught the body ...that shouldnt be ..
Hope u got it
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I got it before - just change the divId to point at different menus.

Should not be hard to modify

Michel

Author

Commented:
Not able to get U
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Hope this pastes ok


<!-- TWO STEPS TO INSTALL RIGHT CLICK MENU:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<style>
<!--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Web Site:  http://www.dynamicdrive.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
ie5menu=null;
function showmenuie5() {
 eid = event.srcElement.id;
 if (eid!='td1' && eid!='td2') return;
 hidemenuie5();
 if (eid=='td1') ie5menu = document.all('ie5menu1')
 else ie5menu = document.all('ie5menu2')
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
   ie5menu1.style.visibility = "hidden";
   ie5menu2.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
   }
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
   }
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>
<table border=2><tr><td id="td1">Hello1</td><td id="td2">Hello2</td></tr></table>
<div id="ie5menu1" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">Go Back</div>
<div class="menuitems" url="http://javascript.internet.com">Go Home</div>
<hr>
<div class="menuitems" url="http://forum.javascriptsource.com">JS Forum</div>
<div class="menuitems" url="http://faq.javascriptsource.com">Site FAQs</div>
<hr>
<div class="menuitems" url="http://javascript.internet.com/link-us.html">Link to Us</div>
<div class="menuitems" url="http://javascript.internet.com/feedback.html">Contact Us</div>
</div>
<div id="ie5menu2" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">2 Go Back</div>
<div class="menuitems" url="http://javascript.internet.com">2 Go Home</div>
<hr>
<div class="menuitems" url="http://forum.javascriptsource.com">2 JS Forum</div>
<div class="menuitems" url="http://faq.javascriptsource.com">2 Site FAQs</div>
<hr>
<div class="menuitems" url="http://javascript.internet.com/link-us.html">2 Link to Us</div>
<div class="menuitems" url="http://javascript.internet.com/feedback.html">2 Contact Us</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu1.className = menuskin;
ie5menu2.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  3.36 KB -->
Further comment - I'm assuming the issue was not with display a popup menu but with getting it to happen ONLY on the table headings?  This should do what you want:

<HTML>
<HEAD>
<TITLE>Show Menu</TITLE>
<SCRIPT>
var isIE = window.navigator.appName.indexOf("Microsoft")>-1;

function handleMouseDown(e){
  isIE ? contextMenu.style.display = 'none' : document.layers.contextMenu.visibility = 'hide';
  if(isIE){
    if(event.button==2){
       if(event.srcElement.tagName == "TH")
        showContext(event);
    }
  }else{
    if(e.which==3){
       for(var i=0 ; i < document.layers.length-1; i++){
         if(hitTest(document.layers[i],e.x,e.y)){
            return showContext(e);
            break;
          }
       }
     }
  }
}

function hitTest(lyr,x,y){
  if( (x >= lyr.pageX) && (x <= (lyr.pageX + lyr.clip.width) ) ){
    if( (y >= lyr.pageY) && (y <= (lyr.pageY + lyr.clip.height) ) ){
       return true;
     }else{
       return false;
     }
  }else{
    return false;
  }
}

function showContext(e){
  if(isIE){
    contextMenu.style.left = event.x;
    contextMenu.style.top = event.y;
     contextMenu.style.display = 'block';
  }else{
    document.layers.contextMenu.moveTo(e.x,e.y);
     document.layers.contextMenu.visibility = 'show';
  }

  if(isIE) event.returnValue = false;
  return false;
}

function init(){
  if(!isIE)
    document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = handleMouseDown;

  isIE ? contextMenu.style.display = 'none' : document.layers.contextMenu.visibility = 'hide';
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
<TABLE>
  <TR><TH><ILAYER>Title 1</ILAYER></TH><TH><ILAYER>Title 2</ILAYER></TH></TR>
  <TR><TD>Data 1</TD><TD>Data 2</TD></TR>
</TABLE>
<DIV ID="contextMenu" NAME="contextMenu" STYLE="position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background: #C0C0C0; border: 1pt outset white;">
Context menu stuff here
</DIV>
</BODY>
</HTML>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
As didi mine.

Just name the table headings td1 and td2

Can be repeated as long as they are also repeated in

function hidemenuie5() {
  ie5menu1.style.visibility = "hidden";
  ie5menu2.style.visibility = "hidden";
}


However if yours is NS compatible, then that is of course a bonus - as it is now, it shows both your menu AND IE's context menu

Michel
mplungjan, i'm not sure if that was directed at me or not, but yes, mine is NS and IE compat - it shouldn't show the IE context menu over the table headers though, only over the rest of the page.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
But it does in IE6

Michel

Author

Commented:
Guys i have got the code from javascriptsource.com
but addition to this i want to do some more functionality in that code
The code whic i have is that for a particular cell we have hard coded the spl menus ..but in my case ..i should be able to get the value from the browser and based on the conditon i need to populate the spl menu


<html>
<HEAD>

<style>
<!--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Web Site:  http://www.dynamicdrive.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenu()
{
      hidemenu();
      return true;
}
function showsplmenu(splmenu)
{
      hidemenu();
      var rightedge = document.body.clientWidth-event.clientX;
      var bottomedge = document.body.clientHeight-event.clientY;
      if (rightedge < splmenu.offsetWidth)
      {
            splmenu.style.left = document.body.scrollLeft + event.clientX - splmenu.offsetWidth;
      }
      else
      {
            splmenu.style.left = document.body.scrollLeft + event.clientX;
      }
      if (bottomedge < splmenu.offsetHeight)
      {
            splmenu.style.top = document.body.scrollTop + event.clientY - splmenu.offsetHeight;
      }
      else
      {
            splmenu.style.top = document.body.scrollTop + event.clientY;
      }
      splmenu.style.visibility = "visible";
      event.returnValue=false;
      event.cancelBubble=true;
      return false;
}
function hidemenu()
{
      splmenu1.style.visibility = "hidden";
      splmenu2.style.visibility = "hidden";
      splmenu3.style.visibility = "hidden";
      splmenu4.style.visibility = "hidden";
}
function highlight()
{
      if (event.srcElement.className == "menuitems"||event.srcElement.className == "menuitem")
      {
            event.srcElement.style.backgroundColor = "highlight";
            event.srcElement.style.color = "white";
            if (display_url)
            {
                  window.status = event.srcElement.url;
            }
   }
}
function lowlight()
{
      if (event.srcElement.className == "menuitems"||event.srcElement.className == "menuitem")
      {
            event.srcElement.style.backgroundColor = "";
            event.srcElement.style.color = "black";
            window.status = "";
   }
}

function jumpto()
{
      if (event.srcElement.className == "menuitem")
      {
            if (event.srcElement.getAttribute("target") != null)
            {
                  window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
            }
            else
            {
                  window.location = event.srcElement.url;
            }
   }
}
//  End -->
</script>
</HEAD>
<BODY onclick="hidemenu();">

      <div id="splmenu1" class="skin100" onMouseover="highlight()" onMouseout="lowlight()" onClick="jumpto();">
      <div class="menuitem" url="javascript:history.back();">Back</div>
      <div class="menuitem" url="http://javascript.internet.com">Home</div>
      <hr>
      <div class="menuitem" url="http://forum.javascriptsource.com">Forum</div>
      <div class="menuitem" url="http://faq.javascriptsource.com">FAQs</div>
      <hr>
      <div class="menuitem" url="http://javascript.internet.com/link-us.html">Homepage</div>
      <div class="menuitem" url="http://javascript.internet.com/feedback.html">email me</div>

</div>

<div id="splmenu2" class="skin100" onMouseover="highlight()" onMouseout="lowlight()" onClick="jumpto();">
      <div class="menuitem" url="javascript:history.back();">Back</div>
      <div class="menuitem" url="http://javascript.internet.com">Home</div>

</div>

<div id="splmenu3" class="skin100" onMouseover="highlight()" onMouseout="lowlight()" onClick="jumpto();">
      <div class="menuitem" url="javascript:history.back();">Back</div>


</div>
      <div id="splmenu4" class="skin100" onMouseover="highlight()" onMouseout="lowlight()" onClick="jumpto();">
      <div class="menuitem" url="javascript:history.back();">Back</div>
      <div class="menuitem" url="http://javascript.internet.com">Home</div>
      <hr>
      <div class="menuitem" url="http://forum.javascriptsource.com">Forum</div>
      <div class="menuitem" url="http://faq.javascriptsource.com">FAQs</div>

</div>




<script language="JavaScript1.2">
if (document.all && window.print) {
splmenu1.className = menuskin;
splmenu2.className = menuskin;
splmenu3.className = menuskin;
splmenu4.className = menuskin;
document.oncontextmenu = showmenu;
document.body.onclick = hidemenu;
}
</script>

<center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript
Source</a></font>
<form>
<table name="test" border=1>
<tr >

<td  oncontextmenu="javascript:showsplmenu(splmenu1);">ABC <br>XYZ<br>MNO<br>PQR<br></td>
<td oncontextmenu="javascript:showsplmenu(splmenu2);">CBA <br>ZYX<br>ONM<br>RQP<br></td>

</tr>
<tr>

<td oncontextmenu="javascript:showsplmenu(splmenu3);">abc <br>xyz<br>mno<br>pqr<br></td>
<td oncontextmenu="javascript:showsplmenu(splmenu4);">123 <br>456<br>789<br>456<br></td>


</tr>

</table>
</form>
</center>
</body>
</html>
In this we have hard coded the spl menu for each cell
But it should be like that if the cell values is
if if(cell value =xyz)
{
  splmenu1
}
if(cellvalue= abc)
{
splmenu2

}
if anyone have idea for this u can do the changes...
ahosangFinance Systems Developer

Commented:
This question has been abandoned. I will make a recommendation to the moderators on its resolution in a week or so. I appreciate any comments that would help me to make a recommendation.
 
In the absence of responses, I may recommend DELETE unless it is clear to me that it has value as a PAQ. Silence = you don't care
 
ahosang
ahosangFinance Systems Developer

Commented:
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

PAQ
Please leave any comments here within the next seven days.
 
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
 
ahosang
EE Cleanup Volunteer
Commented:
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange

Explore More ContentExplore courses, solutions, and other research materials related to this topic.