Context Menu on Mouse Right Click for IE, FireFox Mozilla, Safari.

After long time, I like to write an article on JavaScript compatibility on different browsers. In this article I am creating a context menu on mouse right click. As we know we can easily create the context menu using javascript, but the main problem is the browser compatibility with this context menu. I am here giving some code to create a context menu. You can use this in any browser. I tested it in Internet Explorer 6.0, Firefox Mozilla 2.0 and Safari 3.0. It’s working fine.

Copy and paste the following code in notepad and save it as TestContextMenu.html and test it.

=============================================================

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>¦¦-Browser Compatible Context Menu-¦¦</TITLE>
<META NAME=’Generator’ CONTENT=’Javascript Context Menu’>
<META NAME=’Author’ CONTENT=’Context Menu on Mouse Right Click’>
<META NAME=’Keywords’ CONTENT=’Browser compatible context menu’>
<META NAME=’Description’ CONTENT=’Internet Explorer IE, FireFox, Safari compatible context menu’>
<style>
<!–
.skin0
{
position:absolute;
width:165px;
border:2px solid black;
background-color:#eeddee;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.menuitems
{
padding-left:10px;
padding-right:10px;
}
–>
</style>
<script language=javascript>
//Following function will fired when we click on the right click menu option.
function getSelText(obj)
{
menuobj.style.visibility=’hidden’
alert(obj);
}
</script>
</HEAD>

<BODY><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER>
<P><B>
<H2>Right Click on the document and select an option from the context menu. <BR>This example is tested in Internet Explorer 6.0, Mozila Firefox 2.0 and Safari 3.0. Its working fine in all these browser.<B> </H2><BR><H1>Hurrey…..</H1>
</P></CENTER>
<div id=’ie5menu’ class=’skin0′ onMouseover=’highlightie5(event)’ onMouseout=’lowlightie5(event)’ onClick=’jumptoie5(event)’ display:none>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Copy’);>Copy</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Cut’);>Cut</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Paste’);>Paste</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘New’);>New</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Edit’);>Edit</div>
<div class=’menuitems’ url=’#’ onmousedown=getSelText(‘Submit’);>Submit</div>
</div>

<script language=’JavaScript1.2′>
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById(‘ie5menu’)

function showmenuie5(e)
{
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY

//if the horizontal distance isn’t enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it’s width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX

//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

menuobj.style.visibility=’visible’
return false
}

function hidemenuie5(e)
{
menuobj.style.visibility=’hidden’
}

function highlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’) firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor=’#00AAff’
firingobj.style.color=’white’
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’)
{
firingobj=firingobj.parentNode;
}
firingobj.style.backgroundColor=” ;
firingobj.style.color=’black’ ;
window.status=”;
}
}

function jumptoie5(e)
{
var firingobj=ie5? event.srcElement : e.target;
if (firingobj.className==’menuitems’||ns6&&firingobj.parentNode.className==’menuitems’)
{
if (ns6&&firingobj.parentNode.className==’menuitems’) firingobj=firingobj.parentNode;
if (firingobj.getAttribute(‘target’))
window.open(firingobj.getAttribute(‘url’),firingobj.getAttribute(‘target’));
else
window.location=firingobj.getAttribute(‘url’);
}
}

if (ie5||ns6)
{
menuobj.style.display=”;
document.oncontextmenu=showmenuie5 ;
document.onclick=hidemenuie5;
}
</script>
</BODY>
</HTML>

==============================================================

Note: I came to know from some comments that the Code is not working. I here note that the code was not working due to the problem with ” character. I don’t know but it was encrypted. I retype the code here and think that it will work. Let me know if you found any problem. Thank you…

Enjoy this……

Reference: http://www.dynamicdrive.com

About these ads

About Vijay Modi

Having 10+ years of experience in web application development. Expertise in various domains like E-Commerce, E-Learning, Insurance. I have expertise in web application development, window application development, Performance improvement, bug fixing etc. I am believing in quality work and achieving deadlines. Also like to work on new technologies and quick learner.
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

19 Responses to Context Menu on Mouse Right Click for IE, FireFox Mozilla, Safari.

  1. keyur says:

    adfasdfasdfasdf asdfasdf

  2. wiki says:

    y the code after copy still cant be used? i cant run in my browser.

  3. andrew says:

    i copied and pasted this into notepad and attempt to run.

    works in neither IE or Firefox.

  4. Anonomous says:

    This sucks, it doesn’t work. Some programmer huh..

  5. Vijay Modi says:

    Hi friends I came to find that when I am publishing this article the ‘ (Quotes) are replaced with ’ (Encoding) character. And due to this the code is not working. Please copy & Paste the code and replace th ’ with the ‘(Quote). It will work.

  6. Manoj says:

    It still sucks

  7. Vijay Modi says:

    Manoj,

    Please update the ’ charactor with ‘ . It will resolve your problem.

  8. Anonomous says:

    Wow this is not working. At all.

    Where is the code that make other browsers than ie5/ie6 listen for right click?

    Please re-paste the code in some quote tags or something, that doesnt destroy it…

    Lol. :(

  9. ejoshva says:

    hi, I copied this code and replaced ’ with ’
    and tried to open the file in ie
    I showed hurray u can now right click the document…..
    when I right click it shows only the usual context menu which appears in the IE is displayed.
    Please help me out in create a context menu…It’s mandatory for my project.

  10. Julian Waller says:

    It works you with a bit of tweaking
    you need to fix the ‘ ” with their correct characters and at two point there is a ” when it should be two ‘ . i will post the workin code at http://julusian.freehostia.com/rclick.htm

  11. ejoshva says:

    Thanks. Its working. Can I get your email id. I need a little help regarding my project. Hope you will help me.

  12. ejoshva says:

    Actually I am creating a plug-in which does the functionality of security. I need to check the browser security, validate the user, validate the web site whether malicious or not. For checking malicious or not I need the context. For checking the browser security there are some web sites which does that. But I need to do that with my plug-in. Can you help me with checking the browser security

  13. abhinandan patil says:

    Hi, your code for context menu working perfectly,but problem is:
    i have used editable panel.
    all code works correct for contrext menu.
    but when i type long msg & when verticle scroll acivate, when i right click on any word the popup comes but cursor goes to last.and msg scroll down.
    i.e when i rgt click at first line the cursor should not go last.

  14. JS says:

    Hi, your code for context menu working perfectly,but problem is:
    i have used editable panel.
    all code works correct for contrext menu.
    but when i type long msg & when verticle scroll acivate, when i right click on any word the popup comes but cursor goes to last.and msg scroll down.
    i.e when i rgt click at first line the cursor should not go last.

  15. ali says:

    for all the people who say this sucks, go write your own code, right? you ain’t payin this guy anything, he does not owe ya nothing…if it dun work, deal with it…it atleast gives ya pointers to what should be done…and all yas lot had to do was change some characters…for the pathets who can’t even do that…yup, u r precisely the ryt sorta ppl to judje a programmers worth…

    and no, i wasn’t lookin to copy-paste some code, i am tryin to find a work-round ff showin the default context menu when the right click event is triggered…(along with doin what im tellin it to do)

  16. Man… i know one can do a good job and still cant get appriciated enough.. because some A’holes take the shortcut, but come on, put a damn demo page, paste the bloody code and then give the code example!

    This is the only way any code is presented, if you are smart, you’ll take the hint..

    And for the guys who says this sucks.. take a look at the mirror first to see who sucks, before you go and trashing this guy doing his best, at least this guy does something not code copying..

  17. Someone says:

    The “–” characters in the JavaScript comment are being replaced with Unicode. The the two single quotes (to set nothing) is being replaced with a single double quote, which requires fixing in several places. The double quotes are being set to 66 and 99 characters, and the single quotes are 6 and 9s. After a bit of search/replace and test… it all works a treat. Even in IE8 without compatibility mode.

    Thanks. I do second the “demo page” idea though. Would make it a lot easier.

  18. Lalpi Paite says:

    amazing! great work dude!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s