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
