Display menu on rightClick of mouse on browser IE + Mozilla + Safari

Hi,
This document contains the technical details for component “right click”.

Requirement of component :-

Component: right-click
Rules:
Right-clicking should never do anything but display a menu.
Right-clicking should never offer an option that is not available through other methods.

Explanation :-

for this I created Javascript for show a Menu (Div) which containing the server controls . And a close button if user does not want to do any thing he can close Menu. This menu also show when user right click on image. A snip of script is follows In part A and in Part B dive containing a table with some link button which are able to perform action at server side.

This Script is working fine with Mozilla, Internet Explorer, And Safari

for Mozilla we have to call it “ oncontextmenumethod “ under body tag.
Like [body oncontextmenu="menuDiv(event);return false;"]

Part A

JavaScript :- .

[script language="JavaScript"]


//right mouse click Script

// Right-clicking should never do anything but display a menu.
// Right-clicking should never offer an option that is not available through other methods.


function menuDiv(e)
{



if (e == null) e = event;

var DivMenu = document.getElementById('DivMenu');

DivMenu.style.display = 'block';
// Region for Code Area for show div within page area
// note that width of div is 125px and height is 210

var top = 210;
var left = 870;

if( e.clientX ] left)
{
DivMenu.style.left = left+'px';


}
else
{
DivMenu.style.left = e.clientX+'px';



}

if(e.clientY [ top)
{

DivMenu.style.top = document.body.scrollTop;


}
else
{
DivMenu.style.top = (e.clientY-DivMenu.offsetHeight)+'px';

}


// End region of Code Area for show div within page area





return false;
}
//////////////////////////////////////////
// Browser Compatibility //
////////////////////////////////////////
function clickIE4(){
if (event.button==2){

menuDiv( event);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){

menuDiv( event);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}



document.oncontextmenu = new Function("menuDiv(event); return false") //ok working fine IE + Safari + Mozila








// Function for close div menu
function hideMenu()
{


document.getElementById('DivMenu').style.display='none';






return false;
}

[/script]


div

[div id="DivMenu" style="background-color:Bisque ; position: absolute; width: 125;
display: none; border: 2"]
//Add conrols here
[/div]
Part B
In this part I copy paste the complete javascript code form working page.

[title]Untitled Page[/title]
[script language="JavaScript"]


//right mouse click Script

// Right-clicking should never do anything but display a menu.
// Right-clicking should never offer an option that is not available through other methods.


function menuDiv(e)
{



if (e == null) e = event;

var DivMenu = document.getElementById('DivMenu');

DivMenu.style.display = 'block';
// Region for Code Area for show div within page area
// note that width of div is 125px and height is 210

var top = 210;
var left = 870;

if( e.clientX ] left)
{
DivMenu.style.left = left+'px';


}
else
{
DivMenu.style.left = e.clientX+'px';



}

if(e.clientY [ top)
{

DivMenu.style.top = document.body.scrollTop;


}
else
{
DivMenu.style.top = (e.clientY-DivMenu.offsetHeight)+'px';

}


// End region of Code Area for show div within page area





return false;
}
//////////////////////////////////////////
// Browser Compatibility //
////////////////////////////////////////
function clickIE4(){
if (event.button==2){

menuDiv( event);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){

menuDiv( event);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}



document.oncontextmenu = new Function("menuDiv(event); return false") //ok working fine IE + Safari + Mozila








// Function for close div menu
function hideMenu()
{


document.getElementById('DivMenu').style.display='none';






return false;
}

[/script]
[/head]
[body oncontextmenu="menuDiv(event);return false;"]
[form id="form1" runat="server"]
[div style="vertical-align:middle;"]
Right Click Anywhere
[/div]
[%-- Creating Menu. It will display on right click--%]
[div id="DivMenu" style="background-color:Bisque ; position: absolute; width: 125;
display: none; border: 2"]
[table]
[tr]
[td style="width: 100;"]
  Menu  [/td]
[td align="left"]
[asp:LinkButton ID="btnCancel" runat="server" Text="X" ForeColor="red" ToolTip="Close"
OnClientClick="return hideMenu(); " /][/td]
[/tr]
[tr]
[td colspan="2"]
[asp:LinkButton ID="btnFirst" runat="server" Text="First Selection" /][/td]
[/tr]
[%-----------------------------%]
[tr]
[td colspan="2"]
[asp:LinkButton ID="Button1" runat="server" Text="Second Selection" /][/td]
[/tr]
[%--------------------------------------%]
[tr]
[td colspan="2"]
[hr /]
[/td]
[/tr]
[tr]
[td colspan="2"]
[asp:LinkButton ID="Button2_" runat="server" Text="Third Selection" /][/td]
[/tr]
[%-----------------------------%]
[tr]
[td colspan="2"]
[asp:LinkButton ID="Button3" runat="server" Text="Fourth Selection" /][/td]
[/tr]
[%---------------------------------%]
[tr]
[td colspan="2"]
[hr /]
[/td]
[/tr]
[tr]
[td colspan="2"]
[asp:LinkButton ID="Button2" runat="server" Text="Fifth Selection" /][/td]
[/tr]
[%-----------------------------%]
[tr]
[td colspan="2"]
[asp:LinkButton ID="LinkButton1" runat="server" Text="Sixth Selection" /][/td]
[/tr]
[/table]
[/div]
[/form]
[/body]
[/html]

Thanks
Mahesh K. Sharma